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

Question

我在项目中使用带有分页组件的Table。单击删除图标时需要一次删除单行。这是我创建的stackblitz链接。

尝试过此链接，他们在这里执行了编辑| 更新| 删除操作。我只希望删除操作。如何实现？

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的叉子

编辑

如果您不需要增加头寸的价值，则可以使用：

<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