使用Firebase删除项后如何正确更新Angular列表？

在Angular中使用ngFor渲染表格列表，TS文件包含getAllUploadedImages（获取Firebase数据）和deleteWar（删除Firebase文档）两个方法。出现异常：列表原有3项，删除1项后列表自动更新却显示5项（原3项+剩余2项），仅刷新页面才会显示正确的2项。

相关代码 #

HTML #

<tr *ngFor="let value of imagesList">
    <td scope="row">{{value.id}}</td>
    <td>{{value.imageName}}</td>
    <td>{{value.warDate | date}}</td>
    <td><img src="{{value.screen}}" width="40px" height="40px" class="rounded-circle"></td>
    <td> {{'dashboard.Download' | translate}}</a> </td>
    <td><button type="button" class="btn btn-link" (click)="deleteWar(value)">{{'dashboard.Delete' | translate}}</button></td>
</tr>

获取数据方法（GET） #

getAllUploadedImages() {
  const auth = getAuth();
  const user = auth.currentUser;

  const q = query(collection(this.db, "warstats"), where("userId", "==", user?.uid));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    querySnapshot.forEach((doc) => {
      const data = doc.data() as WarImage;
      data.id = doc.id;
      this.imagesList.push(data as WarImage);
    });
  });
}

删除方法（DELETE） #

async deleteWar(image: WarImage) {
  await deleteDoc(doc(this.db, '/warstats/' + image.id));
}

解决方案 #

问题根源在于onSnapshot的回调逻辑：每次数据变更（包括删除操作触发的快照更新）时，代码都会将新数据追加到imagesList中，没有清空旧数据，导致新旧数据叠加。

修改getAllUploadedImages方法，在处理新快照数据前清空数组，或者直接用新数据替换原数组：

方案1：清空后追加 #

getAllUploadedImages() {
  const auth = getAuth();
  const user = auth.currentUser;

  const q = query(collection(this.db, "warstats"), where("userId", "==", user?.uid));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    this.imagesList = []; // 先清空旧数据
    querySnapshot.forEach((doc) => {
      const data = doc.data() as WarImage;
      data.id = doc.id;
      this.imagesList.push(data as WarImage);
    });
  });
}

方案2：直接映射为新数组（更简洁高效） #

getAllUploadedImages() {
  const auth = getAuth();
  const user = auth.currentUser;

  const q = query(collection(this.db, "warstats"), where("userId", "==", user?.uid));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    this.imagesList = querySnapshot.docs.map(doc => {
      const data = doc.data() as WarImage;
      data.id = doc.id;
      return data;
    });
  });
}

这样每次快照更新时，都会用最新的完整数据替换原数组，避免新旧数据叠加，删除操作后列表会直接显示正确的剩余项。

内容的提问来源于stack exchange，提问作者Rwi