我试图创建一个表单来提交详细信息,但当我订阅服务时,订阅完成了两次。第一个是空数据,第二个是实际数据。
Component.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');
}
});
}
Service.ts
getBook(id) {
console.log('called firebase get book');
return this.db.doc(`/books/${id}`).valueChanges();
}
下面是Chrome控制台的图片。这表明订阅被调用了两次,但firebase服务没有被调用。
Chrome console logs: Image please click to view
Chrome控制台日志
called firebase get book
subscribe called
subscribe called
请帮
5条答案
按热度按时间jmp7cifd1#
这是因为当Books集合发生变化时,getBooks返回的observable会发出一个新值。第一次不存在具有相同isbn的图书,因此数据为空。然后你添加了一本书,所以同样的可观察到的火再次出现,这次是你刚刚添加的书
如果您只想获取数据一次,则可以使用take来只订阅一次。
ergxz8rk2#
就像Chau Tran说的,你可以过滤以获得有效的响应。如果你还没有,我会添加一种方式来取消订阅。在下面的代码中,
this.alive
是一个为true的字段,在OnDestory生命钩子中变为false。kyvafyod3#
使用管道(take(1))
iq0todco4#
在函数
addBook
中调用订阅。每次调用函数addBook
都是在进行订阅调用,避免在此类函数中使用订阅。请确保仅在onInit()
中订阅,以便在您进行更改时进行检查。ffscu2ro5#
我遇到了类似的问题,问题是订阅被设置了两次,订阅观察者的函数在
ngOnChanges
中被调用,而ngOnChanges
被意外调用了两次。修复ngOnChanges
调用两次也解决了这个问题。