angular / angular/components

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

Đang mở
#25,307 1 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: cdk/table P4 perf
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### 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
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu với bản tái hiện StackBlitz được liên kết trong src/app/example-component.ts và tái hiện việc render hàng bổ sung bằng hai chỉ thị matRowDef, trong đó một chỉ thị sử dụng mệnh đề when. So sánh kết quả render sau khi thay đổi mảng columns với chu kỳ phát hiện thay đổi tiếp theo có một hàm rỗng; hoàn thành khi các hàng chỉ được render một lần sau khi thay đổi columns và giữ nguyên các giá trị đầu vào trong chu kỳ tiếp theo.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
42/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.