Как удалить выбранную строку только из таблицы материалов таблицы матов

Question

Как удалить выбранную строку только в mat-таблице. Пожалуйста, найдите здесь ссылку на стек. https://stackblitz.com/edit/angular-qzh8g4?file=app/table-basic-example.ts

Я пытался как-то, но не работает.

remove(val) {
console.log(val);
this.dataSource.splice(this.dataSource.indexOf(val), 1);}

Спасибо.

Answer 1

Вы можете использовать MatTableDataSource

и установить remove функцию

remove(element) {
    this.dataSource.data.splice(ELEMENT_DATA.indexOf(element),1);
    this.dataSource = new MatTableDataSource<PeriodicElement>(this.dataSource.data);
}

И онлайн-приложение ссылка

Answer 2

Для этого вам понадобится неизменная операция:

this.dataSource = this.dataSource.filter(item => item !== val)

Answer 3

Вы должны использовать renderRows() функцию MatTable, как показано ниже, для обновления таблицы.

Машинопись

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol', 'action'];
  dataSource = ELEMENT_DATA;
  @ViewChild('table') table:MatTable<any>;
  remove(val) {
    console.log(val);
    this.dataSource.splice(this.dataSource.indexOf(val), 1);
    this.table.renderRows();
  }

HTML

<!-- table tag -->
<table #table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

....

<!-- remove Column -->
  <ng-container matColumnDef="action">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element"> <a (click)="remove(element)">Remove</a> </td>
  </ng-container>

Также убедитесь, что вы передаете значение столбца в функцию удаления вместо события