NgFor in ion-list has duplicates rows

Ionic Framework ionic-v3
1

When using a FirebaseListObservable with an AngularFire2 database list and NgFor in my template i get duplicate rows.

TS

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import firebase from ‘firebase’;
import {AngularFire, FirebaseListObservable} from ‘angularfire2’;
import { LoadingProvider } from ‘…/…/providers/loading’;
import { GroupAddPage } from ‘…/group-add/group-add’;

    /*
      Generated class for the Chats page.

      See http://ionicframework.com/docs/v2/components/#navigation for more info on
      Ionic pages and navigation.
    */
    @Component({
      selector: 'page-chats',
      templateUrl: 'chats.html'
    })
    export class ChatsPage {
    	groups: FirebaseListObservable<any>;
    	people: FirebaseListObservable<any>;
    	userProfile: any;
    	chatType: string = "groups";

      constructor(public navCtrl: NavController, public navParams: NavParams, af: AngularFire) {
      this.groups = af.database.list('/Groups');
      this.people = af.database.list('/userProfile/');
      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad ChatsPage');
      }

      goToGroupAddPage(){
      this.navCtrl.push(GroupAddPage);

      }

    }

HTML

<ion-list *ngSwitchCase=“‘people’”>

  			<ion-searchbar>
  			[(ngModel)]="peopleSearch"
  			[showCancelButton]="shouldShowCancel"
  			(ionInput)="searchPeople($event)"
  			(ionCancel)="onCancel($event)">
			</ion-searchbar>

  				<ion-item color = "amethyst-reverse" detail-push *ngFor="let person of people | async" (click)="goToPersonChat(person)">
    				<ion-avatar item-left>
      					<img src={{person.photoURL}}>
    				</ion-avatar>
    					<h2>{{person.firstname}} {{person.lastname}}</h2>
  				</ion-item>

  		</ion-list>

This is my end resulting ion-list. I only have three users in my firebase database (User1, User2, and User5)

image

2

Is part of your code missing? I don’t understand what the purpose of this.groups is, and I suspect it is causing the problem because you don’t unsubscribe from it. One test you can run is to transition to and from the page multiple times. If you keep getting more duplicate rows, you’re reading the FirebaseListObservable repeatedly – failing to unsubscribe when you leave the page. The async pipe is supposed to unsubscribe you, which means there’s a loose end somewhere else.

3

Yep, Thanks! I had a subscribe left open from my users profile, so when i transitioned to and from the profile page and my other page it was repeating the FirebaseListObservable. i changed some of my firebase structure and put an async pipe on my user profile observable. This particular issue is resolved.