Почему у ngx-datatable низкая производительность?

Я создал простую таблицу данных с ок. 20 столбцов и 50 строк примерно так:

<ngx-datatable
    class="bootstrap"
    [rows]="filteredlist"
    [reorderable]="reorderable"
    [headerHeight]="50"
    [rowHeight]="38"
    [selectionType]="'single'"
    [scrollbarV]="true"
    [scrollbarH]="true"
    style="max-height: 60vh"
>
    <ngx-datatable-column name="#" width="50">
        <ng-template let-rowIndex="rowIndex" let-row="row" ngx-datatable-cell-template>
            {{ rowIndex + 1}}
        </ng-template>
    </ngx-datatable-column>
    ...

</ngx-datatable>

Что меня интересует сейчас, так это медленная производительность. Когда я прокручиваю по горизонтали, заголовок перемещается с задержкой. Кроме того, когда я использую [frozenLeft]="true", он сильно мерцает.

Что-то не так с моей таблицей или есть какие-либо подсказки по производительности?


angular ngx-datatable
person Lars    schedule 28.12.2019    source источник
comment
Может попробовать включить/выключить виртуализацию? swimlane.gitbook.io/ngx-datatable/api/table/ По умолчанию он включен. Если вы отключите его, у вас будет хуже производительность, но, возможно, мерцание исчезнет.   -  person Milan Tenk    schedule 28.12.2019
comment
Вы когда-нибудь находили решение этого или причину?   -  person Elijah    schedule 20.08.2020
comment
@Элайджа и да и нет. Проверьте здесь stackblitz.com/edit/angular-fixed-table-column Пожалуйста, обратите внимание, что stackblitz еще не работает (извините, но нет времени), но вы найдете весь соответствующий код для таблицы исправленным. Попробуйте :-)   -  person Lars    schedule 20.08.2020

Ответы (1)


arrow_upward
1
arrow_downward

попробуйте настроить обнаружение изменений OnPush в компоненте таблицы:

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
person Matt Anders    schedule 25.08.2020