从角形材料列表中删除带有标题的项目

Question

我有标头的材料清单。标题下分组了类似的项目。 我还添加了删除按钮。如果我从列表中删除最后一项，则标题也应删除。我尝试过的是：

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您删除了最后一项。