bug(CdkTable): Table rows are re-rendered twice when columns change
- 主要语言
- TypeScript
- 星标
- 25k
- 派生
- 6.8k
- 平均合并
- 1 天 8 小时
- 30 天内合并 PR
- 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 复现开始,使用两个 matRowDef 指令复现额外行的渲染,其中一个使用 when 子句。将更改 columns 数组后的渲染与下一个使用空函数的变更检测周期进行比较;完成标准是 columns 更改后行只渲染一次,并在后续周期中保留输入值。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 42/100