订阅被调用两次

Question

我正在尝试创建一个表单来提交详细信息，但是当我订阅该服务时，订阅完成了两次。第一个是空数据，第二个是实际数据。

组件.ts

addBook() {
    this.errorMessage = null;
    this.fireService.getBook(this.bookDetails.isbn).subscribe(data => {
      console.log('subscribe called');
      if (null != data) {
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Error', content: 'Book is already present in Library. Select Edit book to modify the details', button: false }
        });
        this.errorMessage = 'Book is already present in Library. Select Edit book to modify the details';
      } else {
        this.fireService.addBook(this.bookDetails);
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Success', content: 'Book has been Added to Database', button: false }
        });
        this.router.navigateByUrl('/add-book');
      }
    });
  }

服务.ts

getBook(id) {
  console.log('called firebase get book');
  return this.db.doc(`/books/${id}`).valueChanges();
}

下面是来自 chrome 控制台的图像。这表明订阅被调用了两次，但不是 firebase 服务。

Chrome 控制台日志：图片请点击查看

chrome 控制台日志

called firebase get book
subscribe called
subscribe called

请帮忙

Answer 1

这是因为 getBooks 返回的 observable 在 Books 集合更改时会发出一个新值。第一次没有具有相同 isbn 的书，因此数据为空。然后你添加了一本书，所以同样的observable 再次触发，这次是你刚刚添加的书

如果只想获取一次数据，可以使用 take 只订阅一次。

this.fireService.getBook(this.bookDetails.isbn).take(1).subscribe(data => {
  console.log('subscribe called');