如何在单击图标/按钮时从表中删除单行

Question

我在我的项目中使用带有分页组件的表格。我需要在单击删除图标时一次删除单行。这是我创建的堆栈闪电战链接。

尝试了这个链接，这里他们执行了编辑|更新|删除操作。我只想删除操作。我怎样才能做到这一点？

Answer 1

创建一个delete函数，如下所示：

delete(elm) {
this.dataSource.data = this.dataSource.data.filter(i => i !== elm)
}

并从 HTML 调用它：

<ng-container matColumnDef="columndelete">
<th style="width:15%;" mat-header-cell *matHeaderCellDef> </th>
<td  mat-cell *matCellDef="let element">       
<mat-icon (click)="delete(element)">delete</mat-icon> </td>
</ng-container>

这是StackBlitz的一个分支

编辑

如果您不需要 udpup 位置的值，则可以使用：

<td mat-cell *matCellDef="let element; let idx = index"> {{ idx + 1 }} 

在单元格上。这将显示正确的值，但保持位置不变。

如果还想更改位置值，可以使用：

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