Question

在下面的“ addToWishlist”函数中，我将获取外部可观察的结果并将其连接到内部可观察数组，并在内部可观察对象上调用next方法。我将按钮的单击处理程序“ onAddToWishlist”上的方法称为“ addToWishlist”。该按钮位于产品列表的每个项目上。问题是，如果我两次单击按钮，我只会得到我单击的产品。第一次单击，我得到一个空数组。例如，如果我有产品1、2和3，如果我单击产品1，我得到一个空数组，如果我单击产品2，那是当我获得数组中的产品一时，如果我再次单击任何其他产品当产品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); 
      });
}

Answer 1

问题在于您不操纵管道内的值。为了立即获得结果，您还需要映射到订阅时期望的新值。

   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)),
            );
         }
      ));
   }

如何在按钮的单击句柄中使用mergeMap订阅内部可观察对象

1 个答案: