angular / angular/components

bug(CdkTable): Table rows are re-rendered twice when columns change

オープン
#25,307 コメント 1 件 リアクション 1 件 担当者 0 名 GitHub で見る
area: cdk/table P4 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

A component with a MatTable has two `*matRowDef` directives, one with a `when` clause and a default one. When changing the list of columns after the initial render all rows will be recreated and correctly updated.

However, on the next change detection cycle the rows will be re-rendered again even if nothing has changed.

### Reproduction

Steps to reproduce:
1. The MatTable has a default matRowDef and a matRowDef with a "when" clause
2. Enter a value into the first input (which will only be stored in the DOM, no ngModel)
3. Click the button to update the columns array
4. All rows will be re-renderd and your input will be lost (that's okay)
5. Again, enter a new value into the first input
6. Click the button that just calls an empty function that does nothing - but Angular will trigger change detection after the event
7. Even if nothing has changed, all rows will be re-rendered and your input will be lost - that's not okay
8. Again, enter a new value into the first input
9. Click the button again
10. No re-rendering, your input value is still there

https://stackblitz.com/edit/components-issue-2dlnew?file=src/app/example-component.ts

### Expected Behavior

The rows should be re-rendered once, after the columns array has changed.

### Actual Behavior

The rows are re-rendered twice, once after the columns array has changed and a second time on the next change detection cycle.

### Environment

The Stackblitz repro uses v13 (provided by the issue template) but it can be reproduced with the latest version too.

```
Angular CLI: 14.0.6
Node: 16.13.0
Package Manager: npm 8.1.0
OS: darwin arm64

Angular: 14.0.6
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1400.6
@angular-devkit/build-angular 14.0.6
@angular-devkit/core 14.0.6
@angular-devkit/schematics 14.0.6
@angular/cdk 14.0.5
@angular/material 14.0.5
@schematics/angular 14.0.6
rxjs 7.5.6
typescript 4.7.4
```

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

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

調査の方向性

src/app/example-component.ts にあるリンク先の StackBlitz 再現コードから始め、2 つの matRowDef ディレクティブを使って追加行のレンダリングを再現します。そのうち 1 つは when 句を使用します。columns 配列を変更した後のレンダリングと、空の関数を使った次の変更検知サイクルを比較します。columns の変更後に行が 1 回だけレンダリングされ、次のサイクルでも入力値を保持すれば完了です。

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

評価

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

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

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