当产品自动添加到标题组件中的购物车时更新购物车计数而不刷新角度 6 中的页面

Question

我正在开发 Angular 6 中的电子商务应用程序。我想更新标题组件中的购物车计数，当产品从购物车中添加/删除时。如果我刷新页面，两者都是不同的组件，那么只有购物车计数已更新。我尝试了共享服务在这两个组件之间共享数据并尝试了主题概念，但未能自动获取计数。如何实现？

购物车服务.ts：

async getCart():Promise<HttpResponse<Object>> {
    const cartItems = await this.httpClient.get<HttpResponse<Object>>(this.endPointService.getCartItemURL, { observe :'response',withCredentials: true })
        .toPromise();
    return cartItems;
}

header.ts：

 cartItem: CartItem[];
ngOnInit() { 

      const cartItems = <HttpResponse<Object>>await this.cartService.getCart();
      this.cartItem = <CartItem[]>cartItems.body;
}

header.html：

  <span class='cart_count notification-counter' data-toggle="modal" data-target="#exampleModal">{{cartItem.length}}</span>

尝试过的代码：

cartService.ts

 private prodCount = 0;
    prodCountCountChange: Subject<number> = new Subject<number>();
    UpdateCount(count: number) {
        this.prodCount = count;
        this.prodCountCountChange.next(this.prodCount);
    }

header.ts：

cartCount :any;
cartItem: CartItem[];
this.cartCount = this.cartService.UpdateCount(this.cartItem.length);

header.html:

  <span class='cart_count notification-counter' data-toggle="modal" data-target="#exampleModal">{{cartCount}}</span>

我还尝试了此链接中使用的行为主题 angular view is not updating after component value gets changed 没有得到所需的输出。

Answer 1

试试这个，像 Observables 应该被订阅并且 Promises 应该像这样执行。 promise

ngOnInit() { 
      this.cartService.getCart().then(
           (cartItems)=>{
                this.cartItem = <CartItem[]>cartItems.body;
         }
       );
}

Answer 2

您没有正确使用您的主题，并且您在购物车 service.ts 中的初始 getCart() 不会返回 Promise，而是返回结果。

[编辑]

在stackblitz中可用

购物车服务.ts：

// getCard should return only datas, not an httpResponse object
// and the result should be typed
getCart(): Promise<CartItem[]> {
    return this.httpClient.get(
      this.endPointService.getCartItemURL, 
      { observe :'response',withCredentials: true }
    ).pipe(
        map((httpResponse: HttpResponse<any>) => {
            this.updateCount(httpResponse.body.length); // Don't know how your cardItem[] is formatted
            return [].concat(httpResponse.body);
        })
    ).toPromise();
}

private prodCount: number = 0;
public prodCountCountChange: Subject<number> = new Subject();
updateCount(count: number = 0): void {
    this.prodCount = count;
    this.prodCountCountChange.next(this.prodCount);
}

header.ts：

async ngOnInit() {
    this.cartItem = await this.cartService.getCart();
    this.cartService.prodCountCountChange.subscribe(
        newProdCount => this.cartCount = newProdCount
    );
}
// and don't forget to unsubscribe
ngOnDestroy() {
    this.cartService.prodCountCountChange.unsubscribe();
}

header.html：

<span class='cart_count notification-counter' data-toggle="modal" data-target="#exampleModal">{{cartCount}}</span>

希望对你有帮助。