Удалить элемент с заголовком из списка угловых материалов

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)
}

Другой вариант - ввести trackBy в свой ForngFor`, чтобысообщить Angular, когда свойство изменилось.

Answer 2

Вы были действительно близки, чтобы сделать это.

Это ваше приложение исправлено и работает: https://stackblitz.com/edit/angular-material-list-bufnqr

Для объяснения лучше вызывать element.category вместо element['category'] и так далее для каждого поля, и вам нужно удалить element.category, а не element.name в конце, когда вы удаляете последний элемент.