Question

我在项目中使用具有分页功能的表格组件。我需要单击 delete （删除）图标，一次删除一行。这是我创建的stackblitz链接。

对此link进行过尝试，他们在此处进行了编辑|更新|删除操作。我只想要删除操作。如何实现？

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>

Here is a fork of the StackBlitz

编辑

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

<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

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

1 个答案: