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。

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

Ionic Angular Firestore: refresh list after deleting an element

angular

ionic-framework

google-cloud-firestore

ionic5

angular11