0

I have stored user ID in the comment database enter image description here

now I want to fetch user data while retrieving comments using the following code

this.firestore.collection("comments", ref => ref.where("enable", "==", true).orderBy("date", "desc").limit(10)).valueChanges({ idField: 'docId' }).subscribe((res) => {
    this.comments = res;
    res.forEach((element,index) => {
 
 
 
 
 
 
 
 this.firebase.collection("users").doc(element.user).valueChanges().subscribe((res) => {
            this.comments[index].userData = res;
        })
    });
})

HTML Code

<div *ngFor="let item of comments">
    <p class="lis">
        <img *ngIf="item?.userData?.pic" [src]="item?.userData?.pic" alt="" srcset="" style="width: 30%;float: left; margin: 5%;border: 1px solid white; " /> 
        <span style="font-size: 5vw; font-weight: 600;text-align: justify;">
            {{ item.message }}
        </span><br>
        <span style="font-size: 5vw; font-weight: bold">- {{ item?.userData?.name }} , {{
            item?.userData?.city }} ,
            {{ item?.userData?.state }}
        </span>
        <br>
        <i class="fa fa-thumbs-up like" aria-hidden="true" style="cursor: pointer;font-size: 5vw;" (click)="like(item?.docId)"></i> &nbsp;{{ item?.like }}
    </p>
    <div class="row">
        <div class="col-3" *ngFor="let img of item?.photos">
            <img [src]="img" style="width: 100%;height:auto;cursor: pointer;" (click)="openImg(img)">
            <br>
        </div>
   </div>  
</div>

When data get updated HTML page flickers and I don't want that flickering.

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Sylvin J. Rodrigues
  • 11
  • 2

1 Answers1

0

According to this github post, the flickering can be solved by adding trackBy in your *ngFor. More about the topic in the following link.

For example:

<ion-list *ngFor="let item of itemsList; trackBy: trackByFn">...</ion-list>

and in ts file:

 trackByFn(index: number, item: any): number {
   return item.serialNumber;
}

Make certain that your trackBy function returns a unique ID.

Andres Fiesco Casasola
  • 733
  • 1
  • 12
  • @Sylvin if this answer has solved your question please consider [accepting it](https://meta.stackexchange.com/q/5234/179419) by clicking the check-mark. This indicates to the wider community that you've found a solution and gives some reputation to both the answerer and yourself. There is no obligation to do this. – Andres Fiesco Casasola Feb 23 '22 at 17:27