Ionic ngДля дублирования элементов при переходе с другой страницы обратно на исходную страницу

Question

У меня проблемы с дублированием кода в ngFor, когда я перехожу с одной страницы на свою.Когда код запускается в первый раз, он в порядке и делает то, что мне нужно, но когда я перехожу с одной вкладки обратно на исходную вкладку с помощью ngFor, он дублирует элементы.

TS Code;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
 export class HomePage {
 selection: any[];
 titles: any[];
 show: boolean = false;

 constructor(private modalCtrl: ModalController,
          private photoService: PhotoService) {}

ionViewWillEnter() {
this.titles = this.photoService.getTitle();
this.selection = this.photoService.getPhotoRoll();
if(this.titles.length > 0) {
  this.show = true;
}
console.log(this.selection);
}

onPlaySlide(index: number) {
const num = { number: index }
console.log(index);
const modal = this.modalCtrl.create(SlidePage, num);
modal.present();
}

}

HTML-код;

<ion-list *ngIf="show">
  <ion-item-sliding
    *ngFor="let select of selection; let i = index">
    <ion-item (click)="onPlaySlide(i)">
        <ion-thumbnail item-start>
          <img [src]="select.img">
        </ion-thumbnail>
        <h2 *ngFor="let title of titles">{{ title }}</h2>
    </ion-item>
    <ion-item-options>
      <button 
        ion-button 
        color="danger"
        (click)="onRemoveFromPhotoRoll(select)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

Спасибо за помощь.

Answer 1

Сделайте так, чтобы ваш сервисный вызов был загружен:

ionViewDidLoad{
this.titles = this.photoService.getTitle();
this.selection = this.photoService.getPhotoRoll();
if(this.titles.length > 0) {
  this.show = true;
}
console.log(this.selection);

}