观察 Firestore 监听器时仅触发一次更改类型

Question

根据用户将操作标记为完成会触发弹出窗口。但是，如果用户勾选了很多项目并且没有刷新页面，那么之前的所有弹出窗口都会继续弹出，并且他们每次都必须 x 出每一个。

不知道这是为什么，我取消订阅了。

    async checkProgress(){
        debugger
      if (this.Origin == 'SGBA') {
       if (this.data?.action==="update" && this.status == 'Complete') {
        //Gets modified document data to pass into progress popout component
        let newData;
        let q = await this.busiAssessmentService.readOverallData2(this.UID);
        const unsubscribe = await onSnapshot(q, (snapshot) => {
       let  changes = snapshot.docChanges()
       console.log(changes.length)
       changes.forEach((change) => { 
            console.log(change.type)
            console.log("change.type")
          if (change.type === "modified") {
              newData = change.doc.data();
              console.log("Modified doc: ", change.doc.data());
               this.openBox(newData, this.inputSource, this.Category)
              return newData;
              }
            });
          },(error) => {
              console.log(error)
           });
           if (newData !== undefined){
            unsubscribe();
           }
      }
     }
    }

Answer 1

你在错误的地方取消订阅快照取消订阅，而不是在最后取消订阅

this.openBox(newData, this.inputSource, this.Category);

行后取消订阅。

更新代码：

async checkProgress(){
  if (this.Origin == 'SGBA') {
    if (this.data?.action==="update" && this.status == 'Complete') {
      //Gets modified document data to pass into openBox
      let newData;
      let q = await this.busiAssessmentService.readOverallData2(this.UID);
      const unsubscribe = await onSnapshot(q, (snapshot) => {
        let changes = snapshot.docChanges();
        console.log(changes.length);
        changes.forEach((change) => { 
          console.log(change.type);
          console.log("change.type");
          if (change.type === "modified") {
            newData = change.doc.data();
            console.log("Modified doc: ", change.doc.data());
            this.openBox(newData, this.inputSource, this.Category);
            unsubscribe(); // unsubscribe from the listener after the first popout
          }
        });
      }, (error) => {
        console.log(error);
      });
    }
  }
}