从 angular material 列表中删除 header 的项目

Question

我有 material 个列表 header。 header 下分组的类似项目。我添加了删除按钮 also.in 它。如果我从列表中删除最后一项，那么 header 也应该删除。我试过的如下：

https://stackblitz.com/edit/angular-material-list-brenrk?file=app/app.component.ts

但它没有被删除。请帮忙。

Answer 1

默认情况下，Angular 的更改检测循环遍历您的数组，并检查是否存在对先前更改的引用更改。现在，您没有更改任何引用，只更改了这些对象的属性个。由于数组中的对象引用没有改变，Angular 无法识别出发生了变化。我建议使用不可变运算符，它不会改变以前的对象但会创建一个现在的对象：

removeFromList(obj){
  this.valmap = this.valmap
    .map(element => {
      return {category: element.category, values: element.values.filter(fruit => fruit.name !== obj.name)}
  })
    .filter(element => element.values.length > 0)
}

你的另一个选择是在你的 ˙ngFor` 中引入 trackBy，当属性改变时告诉 Angular。

Answer 2

你真的差点做到了。

这是您的应用程序，已更正并正常运行： https://stackblitz.com/edit/angular-material-list-bufnqr

为了解释，最好调用 element.category 代替 element['category'] 等等，你需要删除 element.category 而不是 element.name删除最后一项时结束。

从 angular material 列表中删除 header 的项目

Remove item with header from angular material list

angular

angular-material2