有效地将 [ngClass] 表达式应用于 td答案

【问题标题】：Efficiently apply [ngClass] expression against td有效地将 [ngClass] 表达式应用于 td
【发布时间】：2021-07-09 12:01:26
【问题描述】：

我正在从 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 类？

【问题讨论】：

向您的元素添加一个新属性，遍历行和列。有人喜欢：stackoverflow.com/questions/68263984/….
[ngClass]="getColumnClassName(colData.colIndex,rowData.rowIndex)" 此函数将调用无限次，因为您正在访问 DOM 中的函数，当您滚动或单击该函数调用多次时因为你感觉冻僵了

标签： angular typescript ng-class angular-ng-class

【解决方案1】：

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

我建议你实现自定义pure pipe，因为它只会在输入数据不变的情况下触发一次。

【讨论】：

【解决方案2】：

这里我们必须在内容渲染信息视图之前进行逻辑：

例子：

service.functionName().scubscribe(response => {
    this.rowData = response;
    this.rowData.columns = this.rowData.columns.map((val) => {
        val['selected'] = false
        if (this.selectionSettings.columnsToSelect.filter(e => e.colIndex === val.colIndex).length > 0) {
            if (this.rowData.rowIndex >= this.selectionSettings.startIndex) {
                val['selected'] = true
            }
        }

    })
})

在组件 HTML 中通过以下方式访问 ng 类

<td *ngFor='let colData of rowData.columns'
            id="{{colData.colIndex}}"
            (click)="selectColumn(colData.colIndex)"
            [ngClass]="{'cell-selected':colData.selected,'cell-default': !colData.selected}"
            name="cell">
          {{colData.cell.value}}
</td>

```

【讨论】：

service.functionName() ?我需要为此定义服务吗？或者我可以订阅组件 ts 文件本身的更改吗？