Ionic Angular Firestore：删除元素后刷新列表

Question

删除项目后，我无法刷新我的元素列表。 而且，我不明白的是：为什么添加元素后它会起作用。有什么不同？ 我寻找了多种解决方案，但没有找到一个好的解决方案。

我的服务

addWord(word: Word) {
    db.collection('words').add({
      name: this.toolsService.upperFirstletter(word.name),
      description: word.description
    })
      .then(() => {
        this.toastService.toastSuccess(`Le mot ${word.name} a bien créé !`);
      })
      ...
    this.emitWords();
  }

deleteWord(word: Word) {
    db.collection('words').doc(word.id).delete()
      .then(() => {
        this.toastService.toastSuccess(`Le mot ${word.name} a bien été supprimé !`);
      })
      ...
    this.emitWords();
  }

emitWords() {
    const listWords: Word[] = [];
    const wordCollection = db.collection('words').orderBy('name', 'asc').get();
    wordCollection
      .then((querySnapShot) => {
        querySnapShot.forEach((doc) => {
          listWords.push(
            new Word(
              doc.id,
              doc.data().name,
              doc.data().description
            )
          );
          this.listWords$.next(listWords.slice());
        });
      })
    ...
  }

它适用于add()，但不适用于delete()。感谢您的帮助！

Answer 1

如果您为firestore 启用了离线功能，请不要使用then 或await。只运行你的代码，就好像它是同步的：

addWord(word: Word) {
    db.collection('words').add({
      name: this.toolsService.upperFirstletter(word.name),
      description: word.description
    })
     
        this.toastService.toastSuccess(`Le mot ${word.name} a bien créé !`);
      
      
      ...
    
  }

deleteWord(word: Word) {
    db.collection('words').doc(word.id).delete()
      
        this.toastService.toastSuccess(`Le mot ${word.name} a bien été supprimé !`);
        
      
      ...
   
  }

实时监听器的 Ant 使用 onSnaphost 就像这里：

db.collection("words").orderBy('name', 'asc')
    .onSnapshot((querySnapshot) => {
        var words = [];
        querySnapshot.forEach((doc) => {
            words .push(doc.data().name);
        });
        console.log("Current cities in CA: ", words.join(", "));
    });

这样您就无需在每次更改内容时都致电emitWords。