如何让mat表观察其数据源的更改

我用angularcli创建了一个angular6项目。

为UI使用角度材质

我正在开发某种电子商务应用程序,因此我创建了一个购物车服务,代码如下:

import {Inject, Injectable} from '@angular/core';
import { LOCAL_STORAGE, StorageService } from 'ngx-webstorage-service';
import {Product} from './product';
import {CartProduct} from './CartProduct';



const CART_ITEMS = 'cart_items';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  cartItems: {};
  constructor(@Inject(LOCAL_STORAGE) private storage: StorageService) {
    if (!this.storage.has(CART_ITEMS)) {
      this.storage.set(CART_ITEMS, []);
      this.cartItems = {};
    } else {
      this.cartItems = this.storage.get(CART_ITEMS);
    }
  }

  public addProduct(product: Product, quantity: number) {
    if (this.cartItems.hasOwnProperty(product.id)) {
      this.cartItems[product.id].quantity += quantity;
    } else {
      const p: CartProduct = new CartProduct();
      p.product = product;
      p.quantity = quantity;
      this.cartItems[product.id] = p;
    }
    this.storage.set(CART_ITEMS, this.cartItems);
  }
  public setProductQuantity(productId: number, quantity: number): boolean {
    if (this.cartItems.hasOwnProperty(productId)) {
      this.cartItems[productId].quantity = quantity;
      this.storage.set(CART_ITEMS, this.cartItems);
      return true;
    } else {
      return false;
    }
  }
  public clearCart() {
    this.storage.remove(CART_ITEMS);
    this.cartItems = {};
  }

  public getCart() {
    const cartArray = [];
      for (const k of Object.keys(this.cartItems)) {
        cartArray.push(this.cartItems[k]);
      }
      return cartArray;
  }

  public removeProduct(productId: number): boolean {
    if (this.cartItems.hasOwnProperty(productId)) {
      delete this.cartItems[productId];
      this.storage.set(CART_ITEMS, this.cartItems);
      return true;
    } else {
      return false;
    }
  }
}

getCart() DataSource mat-table .

Cart 组件和a Product 与购物车服务交互的组件。

所以我用以下代码实现了它:

import {Component, Input, OnInit} from '@angular/core';
import {Product} from '../product';
import {CartService} from '../cart.service';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  public quantity: number;
  @Input() product: Product;
  constructor(private cart: CartService) {
    this.quantity = 1;
  }

  addToCart() {
    this.cart.addProduct(this.product, this.quantity);
  }

  ngOnInit() {
  }

}

removeProduct(productId) {
    this.cart.removeProduct(productId);
    this.cartItems = this.cart.getCart();
  }

正如你在这里看到的,我实际上需要设置 this.cartItems 变量,以便ui刷新实际工作。因此,在这里,当我从呈现购物车的组件中移除购物车中的产品时,刷新工作正常。

但是,当我从产品组件添加产品时,我需要刷新浏览器中的页面,以查看添加到购物车产品列表中的新产品。

我怎么通知警察 组件在我的 推车 组件,即 数据来源 已经改变了。在我的情况下,它是由 组件。

谢谢