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

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;

  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) { = true;
  onPlaySlide(index: number) {
    const num = { number: index }
    const modal = this.modalCtrl.create(SlidePage, num);


HTML code;

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

Thank you for your help.