Как удалить одну строку из таблицы при нажатии на иконку / кнопку

Question

Я использую Таблица с компонентом нумерации в моем проекте. Мне нужно удалять одну строку за раз, нажимая значок delete . Вот ссылка 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

EDIT

Если вам не нужно обновлять значение позиции, вы можете использовать:

<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