如何避免使用角度材料从角度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;
  }