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

Posted 2023-03-11

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

【英文标题】：How to avoid transferring the same rows from mat-table in angular 2 using angular material

【发布时间】：2018-03-28 09:50:31

【问题描述】：

我已经使用角材料在角 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

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

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

【参考方案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;
  

【讨论】：

我还有一个查询.....在同一个例子中我已经实现了删除行功能......我能够从 mat-table 中删除选定的行..但我想删除从选定行部分传输的行..

你能不能访问...stackblitz.com/edit/…

你能告诉我如何选择转移的项目并应用删除项目功能..？

在removeSelectedRows() 中，您使用this.data.findIndex(d => d === item); 查找要删除的元素，然后使用this.dataSource.data.splice(index,1); 将其删除。您可以对 selectedRows 数组执行相同的操作，即 this.selectedRows.findIndex(d => d === item); 等。

是的，我可以删除转移的行，,，但前提是我选择了 mat-table 中的特定行......但我想从选定的行部分中选择行并删除。 ..