如果添加新數據，forEach 和 ngFor 會重復數據

Question

在我的 Firebase Firestore 數據庫中添加新數據時，我遇到了這種情況。

forEach將迭代文檔（Firebase 文檔）的值，而ngFor將在前端呈現數據。 這種數據重復只會發生在頁面沒有重新加載並且添加新數據時，如果用戶重新加載頁面，復制就會停止。

我在這里瘋狂猜測，如果頁面可以自動重新加載可以解決，但不幸的是數據的添加發生在其他頁面中。

這是要了解更多的圖像：（如果您注意到，一些數據在前端重復，但如果用戶重新加載頁面，它將 go 恢復正常）。

主頁.html

<div *ngIf="!auth.canDelete(user)">
  <ion-grid>
    <ion-row>
      <ion-col size-lg="3" size-md="4" size-sm="6" size="12" *ngFor="let o of orgInfo">
        <ion-card>
          <div class="container">
            <ion-img class="img" [src]="o.imageUrl"></ion-img>
          </div>
          <ion-card-header>
            <ion-card-title class="truncateWord">{{ o.orgName }}</ion-card-title>
            <ion-card-subtitle>{{ o.userList?.length > 0 ? o.userList?.length : '0' }} member/s</ion-card-subtitle>
          </ion-card-header>
          <ion-card-content>
            <p class="truncateWord">{{ o.description }}</p>
          </ion-card-content>
          <ion-button fill="solid" class="ion-margin" expand="block" color="primary" [routerLink]="['/home', o.orgId]">
            <ion-icon name="open" slot="start"></ion-icon>
            <ion-label>View</ion-label>
          </ion-button>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</div>

主頁.ts

   
      this.organizationList.forEach(uid => {
        const docRef = firebase.firestore().collection("organization").doc(uid);

        docRef.get().then((doc) => {
            if (doc.exists) {
               this.orgInfo.push({
                orgId: doc.data().orgId,
                orgName: doc.data().orgName,
                description: doc.data().description,
                imageUrl: doc.data().imageUrl,
                userList: doc.data().userList
              });

              this.orgInfo.sort((a, b) => (a.userName > b.userName) ? 1 : -1);
            } else {
                // doc.data() will be undefined in this case
                console.log("No such document!");
            }
        }).catch((error) => {
            console.log("Error getting document:", error);
        });
      });

Answer 1

如果您有 doc.data() 返回的唯一值，您可以檢查 orgInfo 數組是否已經包含具有該值的 object，並且僅在沒有此類 object 時才推送到 orgInfo：

if (doc.exists) {
    // assumption: doc.data().orgId is a unique value:
    if (!this.orgInfo.some(e => e.orgId === doc.data().orgId)) {
        // this.orgInfo doesn't contain the item, so we can add it:
        this.orgInfo.push({...});
    }
}