Anguar 2:ngFor 在使用管道时不断重新渲染

时间:2021-07-12 12:43:11

标签: angular performance ngfor angular-ngfor

我有一个简单的表格:

<tr *ngFor="let dataRow of data; trackBy:trackByIdentifier">
   <td *ngFor="let dataCell of dataRow.listRow | visibleColumns; trackBy:trackByColumnName">
   ...
   </td>
</tr>

trackByColumnName(index: number, el:any):string {
  return el.columnName;
}

trackByIdentifier(index: number, element: any): string {
  return element.rowIdentifier;
}

我在开发工具中看到,tr 一直在渲染

我发现当我移除 visibleColumns 管道时,它会停止重新渲染。

这是简单的管道:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'visibleColumns',
  pure: false
})
export class VisibleColumnsPipe implements PipeTransform {

  transform(items: any[]): any {
    if (!items) {
      return items;
    }
    let newList = items.filter(item => !item.notVisible);
    return newList;
  }
}

我应该怎么做才能使其性能更好?

0 个答案:

没有答案