Question

如何仅在mat-table中删除选定的行。请在此处找到stackblitz链接。 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

您将需要执行不变的操作：

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

Answer 2

您可以使用MatTableDataSource

并设置您的remove函数

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

在线申请link

Answer 3

您必须使用如下所示的MatTable的renderRows()函数来更新表格。

打字稿


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>

还要确保您在remove函数而不是event中传递列值

如何仅从物料表物料表中删除选定的行

3 个答案: