时间戳

首页 > 解决方案 > 有效地将 [ngClass] 表达式应用于 td

angular - 有效地将 [ngClass] 表达式应用于 td

问题描述

我正在从 JSON 文件加载动态表，在 td 上我使用角度表达式根据一些应用程序逻辑评估 css 类名称 HTML 和 TS 代码如下所示

<td *ngFor='let colData of rowData.columns'
        id="{{colData.colIndex}}"
        (click)="selectColumn(colData.colIndex)"
        [ngClass]="getColumnClassName(colData.colIndex,rowData.rowIndex)"
        name="cell">
      {{colData.cell.value}}
    </td>
    
    
    
  getColumnClassName(selectedColIndex,selectedRowIndex):string {
    var colSelected = 'cell-default';  
    if (this.selectionSettings.columnsToSelect.filter(e => e.colIndex === selectedColIndex).length > 0) {
      if (selectedRowIndex >= this.selectionSettings.startIndex ) { 
        colSelected = 'cell-selected'
      }      
    }
    return colSelected;
  }

这工作正常。

有时 JSON 可能包含如此多的记录 [1000 行和 10 列] 所以这个 CSS 表达式将被计算 1000*10 次。此列表也有可能增加

这种分配 CSS 类的方法在性能方面是否是最佳的。我感觉 UI 在渲染有这么多记录的表格时会冻结我们如何确保浏览器没有过载，但正确分配 CSS 类？

标签： angulartypescriptng-classangular-ng-class

解决方案

这是不好的做法，因为当您通过函数分配值时，该函数将在每次更改检测时触发。因此，如果您有 1000 个项目，则每个更改检测函数将被调用 1000 次。这就是 UI 将被冻结的原因。

我建议你实现自定义纯管道，因为如果输入数据不会改变，它只会被触发一次。

推荐阅读