Angular таблица матов - добавленная строка не отображается после удаления другой

Question

Я создал таблицу, в которую пользователь может добавлять строки (путем нажатия)

dataSource = new MatTableDataSource(this.ELEMENT_DATA);
this.ELEMENT_DATA.push(...);
this.table.renderRows();

и удалять строки (путем фильтрации источника данных), эти действия работают просто отлично.

this.dataSource.data = this.dataSource.data
      .filter(i => i !== elm)
      .map((i, idx) => (i.position = (idx + 1), i));

После удаления одной строки и добавления другой массив ELEMENT_DATA получает элемент, и таблица не будет отображать его. Спасибо.

Answer 1

стратегия изменения определения таблицы: ChangeDetectionStrategy.OnPush, поэтому для отображения нового элемента вам нужно изменить ссылку на массив

ваша функция удаления возвращает новый массив с массивом отфильтрованных данных. Я думаю, что ваша функция добавления просто делает array.push(newItem)

, чтобы вы могли добавить новый элемент таким образом. Этот должен работать в вашем случае.

this.dataSource.data = [...this.dataSource.data, newItem]