ngFor duplicating items when i go from another page back to the original page


#1

Hello All,

I’m having troubles with my code duplicating items with ngFor when i go from one page to back to its own page. When the code runs first time it is fine and does what i need it to do, but when i go from one tab back to the original tab with the ngFor it duplicates the items.

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 code;

<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>

Thank you for your help.