Currently facing a challenge in my Angular 13.1 Project utilizing @angular/fire 7.4.1 for database management
The issue arises consistently across various screens where data from Firestore Database is displayed, particularly on List screens. The lists are being populated with multiple duplicates of the records stored in my database.
An example can be seen below in the Teams list screen: https://i.sstatic.net/G4x2K.gif
Interestingly, upon navigating to another route and returning to the affected screen, the correct number of entries is displayed.
https://i.sstatic.net/Is8kG.gif
I've considered that it might relate to an initialization issue within the application but haven't been able to pinpoint the cause. I have experience working with AngularFire on previous projects involving Firestore Database.
The list mentioned above is loaded through an ngOnInit() call as shown:
private loadTeamsList(){
if(!this.currentUser.teams) return;
for(var i = 0;i < this.currentUser.teams.length; i++){
/*
Where this.currentUser.teams[i] represents the Firebase document id of the team
*/
this.teamsService.getTeam(this.currentUser.teams[i]).subscribe( team => {
this.teamsList.push(team);
})
}
}
Current record being read contains only one teamId as seen here: https://i.sstatic.net/TvDqL.png
This leads to calling the Team Service function :
export class TeamService {
private endpointPrefix = '/teams'
constructor(private firebaseService: FirebaseService) { }
getTeam(teamId: string): Observable<Team>{
return this.firebaseService.getById(teamId,this.endpointPrefix);
}
...
Further leading to the 'parent' service, FirebaseService, where majority of service calls are made.
@Injectable({
providedIn: 'root'
})
export class FirebaseService{
constructor(private firestore: Firestore){ }
...
getById(id: string | null,endpointPrefix: string): Observable<any>{
const ref = doc(this.firestore,endpointPrefix + `/${id}`);
return docData(ref, { idField: 'id' }) as Observable<any>;
}
getAll(endpointPrefix: string): Observable<any[]> {
const ref = collection(this.firestore, endpointPrefix);
return collectionData(ref, { idField: 'id' }) as Observable<any[]>;
}
get firestoreRef(){
return this.firestore;
}
Attempts to prevent duplicates using the includes() method within subscriptions have not resolved the issue, as the array continues to populate with duplicates. Is there something crucial missing at the service level or am I incorrectly populating the array? This issue persists across all screens retrieving data from the database.