角度材料垫表选定行删除答案

【问题标题】：Angular material mat-table selected row delete角度材料垫表选定行删除
【发布时间】：2022-11-18 13:14:03
【问题描述】：

我想删除角度遮罩表的选定行，你能帮忙吗？

enter image description here

我想删除角度遮罩表的选定行，你能帮忙吗？

enter image description here

【问题讨论】：

标签： angular material-table angular-material-table

【解决方案1】：

这是实现你想要的一种方法，

保存行的索引。
单击删除时拼接数据源并重新分配新数据源。

@Component({
  selector: 'table-basic-example',
  styleUrls: ['table-basic-example.css'],
  templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  selectedItemIdx = null;

  rowSelected(selectedItemIdx) {
    this.selectedItemIdx = selectedItemIdx;
  }

  deleteSelected() {
    this.dataSource.splice(this.selectedItemIdx, 1);
    this.dataSource = [...this.dataSource];
    this.selectedItemIdx = null;
  }
}

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  ...
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns; let i = index" (click)=rowSelected(i) [ngClass]="{'highlight': i === selectedItemIdx}"></tr>
</table>


<button (click)="deleteSelected()">Delete</button>

.highlight {
  background-color: yellow;
}

【讨论】：