angular / angular/components

bug(cdk/table): CdkTable does not handle column updates correctly when using recycleRows

Đang mở
#32,253 2 bình luận 1 reaction 0 người được giao Xem trên GitHub
area: cdk/table P3
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

When using `CdkTable` with the table `recycleRows` directive it doesn't look like the table doesn't re-render cached rows not currently in the DOM. This leads to a situation where if those cached rows are later re-used the cells in the row don't match the columns.

It seems like this may be just a matter of clearing the row cache in `_forceRenderDataRows`. This assumes the row elements can't be re-used at all, but that seems to be the current behavior of `_forceRenderDataRows` to re-render everything. It looks like this could be achieved by calling `detach` on the `_RecycleViewRepeaterStrategy` instance in `_forceRenderDataRows`, but it's unclear the semantics of that method since it's not documented in `_ViewRepeater`. `CdkVirtualForOf` only calls it in `ngOnDestroy` and **`CdkTable` never calls it** (probably a separate bug where these row views get leaked when the table gets destroyed).

### Reproduction

StackBlitz link: https://stackblitz.com/edit/mssn6jgh?file=src%2Fexample%2Fcdk-table-recycle-rows-example.ts
Steps to reproduce:
1. Click `Set Short List` to reduce the number of rows to 15 (caching the 10 removed rows).
2. Then click `Toggle Columns`. This forces a full re-render through `_forceRenderDataRows` (which doesn't populate the cache when removing).

### Expected Behavior

All 15 rows re-render correctly

### Actual Behavior

When the 15 rows are re-rendered 5 have the old list of 3 columns since they were inserted from the cache and the remaining 10 are new rows and render correctly.

### Environment

- Angular: 20.2.4
- CDK/Material: 20.2.4
- Browser(s): 141.0.7390.126
- Operating System (e.g. Windows, macOS, Ubuntu): ChromeOS

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

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

Hướng nghiên cứu

Tái hiện sự cố bằng ví dụ StackBlitz trong src/example/cdk-table-recycle-rows-example.ts, sau đó kiểm tra CdkTable._forceRenderDataRows và hành vi detach của _RecycleViewRepeaterStrategy. Xác nhận rằng việc chuyển đổi các cột sau khi giảm danh sách sẽ render đủ cả 15 hàng với các cột tương ứng, bao gồm cả các hàng được tái sử dụng từ cache.

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
Sôi nổi
Độ rõ ràng
Khá rõ ràng
Mức phù hợp với người mới
52/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.