纯管道处理大量数据时效率低下

Question

我需要通过单个按钮切换展开/隐藏表中的所有行，为此需要，我在对象中有布尔“展开”属性。

为了完成这个我创建了函数：

    toggleAllRows(value: boolean) {
        this.tableData.forEach(row => {
            row.expanded = value;
        }); 
    }

HTML：

[expandedRowKeys]="tableData | expandedRows: childrenFieldKey:expandedFieldKey:dataKey:toggleAllRowsFlag"

纯管道返回包含应扩展的行的对象：

@Pipe({
  name: 'expandedRows'
})
export class ExpandedRowsPipe implements PipeTransform {
  transform(tableData: TableDataModel[], childrenFieldKey: string, expandedFieldKey: string, dataKey: string): { [key: string]: boolean } {
    let obj: { [key: string]: boolean } = {};

    tableData
      .filter(row => (row[childrenFieldKey].length > 0 && row[expandedFieldKey]))
      .forEach(row => {
        obj[row[dataKey]] = row[expandedFieldKey];
      });

    return obj;
  }
}

当然，由于 tableData 数组的不变性和更改检测，它不起作用。

所以在这种情况下我使用了对象的深层复制：

    toggleAllRows(value: boolean) {
        this.tableData =  this.tableData.map(row => {
            return { ...row, [this.expandedFieldKey]: value } as TableDataModel;
        });
    }

纯管道被触发并且起作用了。
但在这种情况下，由于数组对象有很多属性和子对象 - 数组的复制需要很多时间。

我尝试使用不同类型的深度克隆，但没有帮助。

Answer 1

ExpandedRowKeys

-> 在官方文档中表示它需要一个数组而不是值的对象。

在这种情况下使用管道是一个坏主意，因为管道（不纯）在所有更改检测周期中运行，而其他类型的管道（纯）仅在输入更改时运行

不纯的管道，即您在问题中共享的管道对于这种情况是绝对不行的，因为

filter

数组方法是一项昂贵的操作，并且在每个更改检测周期上运行肯定会触发性能问题。

纯管道很好，但对于如此简单的需求来说似乎有点矫枉过正

最简单的是

expand all

-> 只需将表数据的所有键压入一个数组即可

collapse all

-> 清空数组

---

如果您无论如何都要使用管道，请确保在管道上设置了

pure: true

！