Question

我正在使用angular5和angular firebase2。我有一个简单的问题。我正在尝试制作关键字比较模块。一切都很好，实际上，但可观察到的是两次射击。我不知道为什么它会发射两次。

这是我的代码。

/*add-store.component.ts*/
 
  serverCheckKeyword(value) {
    this.test = this.storeService.checkCategory();
    this.test.subscribe(
      data => {
        if (data) {
          // Here, firing twice
          // some categories in Server
          this.objToArr(data);
        } else { // no categories in server
          console.log('No data in server');
          this.nothingData(value);
        }
      });
  }
    
  objToArr(data) {
  //...
  // I think I'm using this wrong. This part was the problem what I've figured out.
    this.storeService.addCategory(this.sortKeyword[keywordIdx], size+1);
  }

/*store.service.ts*/

  addCategory(data, id) {
    const path = `category/${data.name}`;
    const item = {
      id: id,
      categoryName: data.name
    };

    this.db.object(path).update(item)
      .catch(err => console.log(err));
  }

  // Load all of Categories
  checkCategory() {
    return this.db.list('category').valueChanges();
  }

Answer 1

这可能是因为您使用了另一个路由组件，而您忘记取消订阅订阅。

添加对订阅的引用

this['http_call'] = this.test.subscribe(...);

并在destroy

上删除它

ngOnDestroy() { this['http_call'].unsubscribe(); }

否则，这可能来自Firebase侦听数据库事件的事实。这意味着如果您对基地进行了更改，您的观察员将会收到通知。

您可以通过使用此

“取消”数据库侦听器来防止这种情况

return this.db.list('category').valueChanges()
  .pipe(take(1));

Answer 2

这是我解决这个问题的答案。完成逻辑后我只是this.test.unsubscribe()。

serverCheckKeyword(value) {
this.test = this.storeService.checkCategory()
  .subscribe(
    data => {
      // some categories in Server
      if (data) {
        // Here was firing twice
        this.objToArr(data);
      } else { // no categories in server
        this.nothingData(value);
      }
    },
    err => {
      console.log(err);
    });

}

...

this.storeService.addCategory(this.sortKeyword[keywordIdx], size + 1);
this.test.unsubscribe();

效果很好！谢谢大家:)）

为什么在Angular5中可观察到两次？

2 个答案: