angular / angular/components

bug(cdk) Replacing datasource does not refresh/display items in cdk-virtual-scrollport

Đang mở
#22,464 8 bình luận 7 reaction 0 người được giao Xem trên GitHub
area: cdk/scrolling 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ả

**Overview**

The first time you assign a datasource for iteration within the cdk-virtual-scrollport, all works as expected, as per the documentation example of displaying the first page of items. See "Virtual scroll with a custom data source" on https://material.angular.io/cdk/scrolling/examples

The bug however is if you subsequently try to assign a new instance of a datasource object to the same scroller. You will find that the scrollport will not request/display the first page of items from that new datasource **until the user scrolls the visible area**.

**Motivation/Use Case**
In the real-world our virtual data can require some sort of user driven filtering, like a search screen. Which will require a complete replacement of all the underlying/cached data in the scroller with fresh results. This is ideally achieved by replacing the datasource when the user triggers the search.

**Expected Behavior**
Scroller should reset itself automatically when given a new datasource and request the first page of rows in exactly the same way it does when it was assigned the first datasource.

**Actual Behavior**
CollectionViewer does not fire an event to the subscription in connect() until it has a range that differs.

**Minimal repro:**
See https://stackblitz.com/edit/angular-fs9xei-rgkahy?file=src%2Fapp%2Fcdk-virtual-scroll-data-source-example.ts

Run the sample, initial list items will appear. Click on the "Switch datasource button", and you will see the items in the list stuck with saying "loading..." indefinitely. You have to scroll before the datasource actually gets asked for data to be able to be displayed.

**Environment**
Angular: 11
CDK/Material: 11
Browser(s): n/a
Operating System (e.g. Windows, macOS, Ubuntu): n/a

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

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

Hướng nghiên cứu

Bắt đầu bằng cách chạy bản tái hiện StackBlitz được liên kết và xem lại ví dụ data-source của CDK virtual scroll. Theo dõi cách cdk-virtual-scrollport thay thế datasource của nó và cách các sự kiện CollectionViewer đến subscription trong connect(). Được xem là hoàn tất khi việc chuyển đổi datasources yêu cầu và hiển thị trang đầu tiên mà không cần cuộn.

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
35/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.