如何在按钮的单击句柄中使用mergeMap订阅内部可观察对象
如何在按钮的单击句柄中使用mergeMap订阅内部可观察对象
提问于 2019-12-05 15:15:17
在下面的"addToWishlist“函数中，我将获取外部可观察数组的结果，并将其连接到内部可观察数组，然后对内部可观察数组调用next方法。我在按钮的单击处理程序"onAddToWishlist“上调用方法"addToWishlist”。该按钮位于产品列表的每一项上。问题是，如果我点击按钮两次，我只能得到我点击的产品。第一次单击时，我得到一个空数组。例如，如果我有产品1，2和3，如果我点击产品1，我会得到一个空的数组，如果我点击产品2，我就会得到阵列中的产品1，如果我再次点击任何其他产品，当产品2也出现在阵列中时。请检查下面的代码，还包括应用程序的图像。Product list
addToWishlist(productId: string) {
return this.getProduct(productId).pipe(mergeMap(
product => {
return this.wishlist.pipe(
take(1),
tap(wishlist => {
this._wishlist.next(wishlist.concat({ ...product }));
})
);
}
));
}
get wishlist() {
return this._wishlist.asObservable();
}
// Click handler for the wishlist button
onAddToWishlist(productId: string) {
this.wishlistSub =
this.productsService.addToWishlist(productId).subscribe(wishlist => {
this.wishlist = wishlist;
console.log(wishlist);
});
} 回答 1
Stack Overflow用户
发布于 2019-12-06 18:10:50
问题在于你没有在你的管道中操作这个值。为了立即得到结果，您还需要在订阅时映射到您期望的新值。
addToWishlist(productId: string) {
return this.getProduct(productId).pipe(mergeMap(
product => {
return this.wishlist.pipe(
take(1),
map(wishlist => wishlist.concat({ ...product })),
tap(wishlist => this._wishlist.next(wishlist)),
);
}
));
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59190019
复制相关文章
相似问题
腾讯云开发者
