问题描述
我正在从 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 类?
解决方法
这是不好的做法,因为当您通过函数分配值时,该函数将在每次更改检测时触发。因此,如果您有 1000 个项目,则对每个更改检测函数将被调用 1000 次。这就是 UI 会被冻结的原因。
我建议您实现自定义 pure pipe,因为如果输入数据不会改变,它只会被触发一次。
,这里我们必须在内容呈现信息视图之前进行逻辑:
示例:
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>
```