如何仅从材料表垫表中删除选定的行答案

【问题标题】：How to remove selected row only from a material table mat-table如何仅从材料表垫表中删除选定的行
【发布时间】：2019-09-25 01:43:12
【问题描述】：

如何仅在 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);}

【问题讨论】：

一个原因是 val 不是你想象的那样。这是一个 MouseEvent
所以.. 更改 html (click)="remove(element)" 并在拼接数组后添加 this.dataSource = [...this.dataSource];，它会起作用。基本上你必须重新初始化那个 mat-table 的源数组。

标签： angular angular-material

【解决方案1】：

你可以使用MatTableDataSource

并设置您的 remove 函数

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

并在线申请link

【讨论】：

【解决方案2】：

你必须使用 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>

还要确保您在删除函数而不是事件中传递列值

【讨论】：

【解决方案3】：

你需要一个不可变的操作：

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

【讨论】：