如何避免使用角度材料从角度 2 中的 mat-table 传输相同的行

Question

我已经使用角材料在角 2 中实现了一个简单的表格。

我已经在 mat-table 中实现了一个功能，我可以从 mat-table 中选择行，然后单击 Transfer Rows ，选定的行数据将填充到 mat-table 外部提供的空间中要显示的选定行。

但是当我从 mat-table 中选择并传输一行时，第二次该行也被传输，我在 Selected Rows 部分中得到了重复的行。

请在此处访问我的示例..https://stackblitz.com/edit/angular-app-material-h2lcps?file=app%2Faccount%2Faccount.component.ts

下面显示的是我的输出...

谁能告诉我如何避免传输重复......？

Answer 1

您可以检查所选元素是否已存在于selectedRows 中，如果不存在则仅添加它。

transferSelectedRows() {
     this.selection.selected.forEach(item => {
      let index: number = this.data.findIndex(d => d === item);
      if(!this.selectedRows.includes(this.data[index])) {
        this.selectedRows.push(this.data[index]);
      }
      console.log(this.data.findIndex(d => d === item));
      console.log(item);

      this.dataSource = new MatTableDataSource<Element>(this.dataSource.data);
    });
    this.selection = new SelectionModel<Element>(true, []);
    this.dataSource.paginator = this.paginator;
  }