Вызов списка сбора из AngularFirebase Создание дубликатов

Question

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

Сервисная функция: вызов элементов из базы данных.

//**Retrieve all shows collection */

getupcomingShows() {
return this.db.collection('shows',
ref => ref.orderBy('startDate')).snapshotChanges().pipe((
map(actions => actions.map(a => {
const data = a.payload.doc.data();
const id = a.payload.doc.id;
return {id, ...data};

}

))),
takeUntil(this.ngUnsubscribe)
);

} 

Страница фида, показывающая дубликаты:

страница показа-ленты:

this.shows = this.event.getupcomingShows();

HTML

 <div *ngIf="activeView == 'shows'">
    <div *ngFor= "let show of shows | async">


    <ion-item class="item"
    [ngClass]="{'bg-1': show.region === 'LEINSTER', 'bg-2': show.region === 'MUNSTER',
    'bg-3': show.region === 'CONNACHT', 'bg-4': show.region === 'ULSTER'}"
    lines ="none" class="shows" button [routerLink] = "['./showId', show.id]" >
    <ion-chip slot="start" class="date-dot">
    <ion-label class="label">{{show.startDate | date:'d'}}</ion-label>
    <p class="sub">{{show.startDate | date: 'MMM'}}</p>
    </ion-chip>
    <ion-label class="show-label">
    <h3 class="show-label"><b>{{show.showName}}</b></h3> 
    </ion-label>


      <ion-thumbnail class="thumbnail"slot="end">
      <img class="icon-horse" src="assets/icon/icon_horse_feed_icon.png">
      </ion-thumbnail>
      </ion-item>

      </div> 
      </div>