angular / angular/components

bug(table): Performance issue when paginator is set on AfterViewInit

オープン
#29,759 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: material/table needs investigation P3 perf
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

According to [documentation](https://material.angular.io/components/table/overview#table-pagination) the recommended way of setting up a table with paginator is by doing this:

```
@ViewChild(MatPaginator) paginator: MatPaginator;
dataSource: MatTableDataSource;

ngOnInit(): void {
this.dataSource.data = this.getMillionsOfRows();
}

ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
}
```

But because no paginator is defined until view is initialized, the whole table will be rendered the first time which can cause a significant performance issue.

In my case real-case project, I'm experiencing ~750ms to render 600 elements in a 8 columns table, and ~80 ms with workaround n°2.

### Workarounds
1. Use `@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;` and set paginator to dataSource on init.
=> Does not work if paginator is in a conditional block (`@if` for example)
2. or, Set data to dataSource after view init.
=> Not great, the table will be rendered empty at first.

### Reproduction

Stackblitz link: https://material.angular.io/components/table/examples#table-overview
Steps to reproduce:
1. Open Material example in Stackblitz
2. Edit table-overview-example.ts and add the following method to the component:
```
test() {
console.log('test');
}
```
3. Edit table-overview-example.html and change the first `` tag to:
```
{{ test() }} {{row.id}}
```
4. Open browser the console and refresh the view

### Expected Behavior

5 logs, i.e. the page size.

### Actual Behavior

100 logs, i.e. the total number of elements.

### Environment

- Angular: >18
- CDK/Material: >18
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start with the Material table overview reproduction, then inspect table-overview-example.ts and table-overview-example.html as described. Run the example with the added test() call and compare the initial render logs with the expected five page-size logs rather than 100 total-row logs. Done means paginator setup no longer causes the full table to render first.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend, performance
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。