Javascript 如何从角度材质表中删除行

我有一个购物车，我通过一个有角度的材料表实现。每行都有一个图片、描述、…、和删除按钮。问题是，当我单击delete按钮时，行不会消失，直到所有项目都消失。我知道该项目正在从购物车中删除，但不会从表中删除，除非我刷新或重新初始化该组件。我在末尾添加了一个带有*ngFor循环的div，当我单击表行上的delete按钮时，div显示了正确的项数，但表没有。A有一个cart.model.ts、一个cart.service.ts来处理删除（以及其他操作），然后是cart组件。我可以只使用css或css库，但我更愿意了解如何解决这个“问题”。任何帮助都将不胜感激，提前感谢！

cart.component.html

你的车是空的！
产品
描述
名称：{{cartItem.Name}

类型：{{cartItem.Type}

大小：{{cartItem.Size}

量
价格
${{cartItem.price}}.00
删除
删除
{{x.name}

cart.service.ts

  private cart: CartItem[] = [
  ]

  addToCart(name: string, type: string, image: string, size: string, quantity: number, price: number){
    let inCartProductId = this.cart.length > 0 ? this.cart[this.cart.length-1].inCartProductId+1 : 1;
    this.cart.push({inCartProductId: inCartProductId, name: name, type: type, image: image, size: size, quantity: quantity, price: price});
  }

  getCart(){
    return this.cart;
  }

  deleteFromCart(inCartProductId: number){
    const product = this.cart.find(p => {
      return p.inCartProductId === inCartProductId;
    });
    if(product){
      this.cart.splice(this.cart.map(p => p.inCartProductId).indexOf(inCartProductId), 1);
    }
  }
}

cart-item.model.ts

export class CartItem {
  constructor(
    public inCartProductId: number,
    public name: string,
    public type: string,
    public image: string,
    public size: string,
    public quantity: number,
    public price: number
  ){}
}

---

当对数据源（cart）进行更改时，mat表将不会呈现。您需要调用它来重新渲染。 在您的.ts中：

@ViewChild(MatTable, {static: false}) table: MatTable<CartItem>;

---

非常感谢你的工作。它抱怨“属性‘table’没有初始值设定项，也没有在构造函数中明确赋值。”如何初始化mat表？

this.table.renderRows();