Эффективно применять выражение [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 оптимальным, когда речь идет о производительности. Я чувствую, что пользовательский интерфейс зависает во время рендеринга таблиц с таким количеством записей. Как мы можем гарантировать, что браузер не перегружен, но правильно назначает классы CSS?


typescript angular angular-ng-class ng-class
person Sebastian    schedule 09.07.2021    source источник
comment
Добавьте новое свойство к своим элементам, перебирая строки и столбцы. Некоторым нравится: чтобы предотвратить повторную визуализацию ngfor при любом событии щелчка "> stackoverflow.com/questions/68263984/.   -  person Eliseo    schedule 09.07.2021
comment
[ngClass]=getColumnClassName(colData.colIndex,rowData.rowIndex) эта функция будет вызывать бесконечное количество раз, потому что вы обращаетесь к функции в DOM, когда вы прокручиваете или щелкаете эту функцию, вызывая несколько раз, что является причиной того, что вы зависли   -  person VENKATESH CHAVVAKULA    schedule 09.07.2021

Ответы (2)


arrow_upward
1
arrow_downward

Это плохая практика, потому что когда вы присваиваете значение через функцию, эта функция будет запускаться при каждом обнаружении изменений. Итак, если у вас есть 1000 элементов, при каждом изменении функция обнаружения будет вызываться 1000 раз. Вот почему пользовательский интерфейс будет заморожен.

Я бы посоветовал вам реализовать собственный чистый канал, потому что он будет запускаться только один раз, если входные данные будут не изменить.

person Nenad Milosavljevic    schedule 09.07.2021

arrow_upward
0
arrow_downward

здесь у нас есть логика перед представлением информации о рендеринге содержимого:

Пример:

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
            }
        }

    })
})
  1. В компоненте 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>

```
person VENKATESH CHAVVAKULA    schedule 09.07.2021
comment
служба.имя_функции() ? Нужно ли для этого определять службу? Или я могу подписаться на изменения внутри самого файла ts компонента? - person Sebastian; 09.07.2021