bug(cdk-experimetal/scrolling): Every item of input array is rendered initially
- 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
Initially, before any scrolling occurs; every item of `items` passed to `cdkVirtualFor` is rendered. After scrolling down for a bit (till `translateY` of `.cdk-virtual-scroll-content-wrapper` changes) and scrolling up (even just a bit) the list of rendered elements sharing to only visible elements.
### Reproduction
Could not create stackblitz with `cdk-experimental` nor `angular` v13. Here is an example of what it does in my fairly rudimentary case: https://youtu.be/ILHPaMk2hZU
related code:
```html
```
-----
Steps to reproduce:
1. Create a container and any item template. Fixed height for simplicity is perfect
```
```
2. Populate `items` array with 1000 elements
3. View in elements panel, that there is the same number of `div`s as there is of `items`.
### Expected Behavior
I expected only needed elements to be rendered.
### Actual Behavior
Every element of my array is rendered making `cdk-virtual-scroll-viewport` do nothing!
### Environment
Angular CLI: 13.0.3
Node: 14.15.4
Package Manager: npm 7.20.6
OS: win32 x64
Angular: 13.0.2
... animations, cdk, cdk-experimental, common, compiler
... compiler-cli, core, forms, language-service, material
... platform-browser, platform-browser-dynamic, router
... service-worker
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1300.3
@angular-devkit/build-angular 13.0.3
@angular-devkit/core 13.0.3
@angular-devkit/schematics 13.0.3
@angular/cli 13.0.3
@angular/google-maps 12.1.3
@schematics/angular 13.0.3
rxjs 7.4.0
typescript 4.4.4
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách tái tạo ví dụ cdkVirtualFor được cung cấp với 1,000 phần tử có chiều cao cố định, rồi kiểm tra các phần tử được render trước và sau khi cuộn. Theo dõi hoạt động của cdkVirtualFor và autosize để xác định lý do lần render ban đầu bao gồm mọi phần tử; công việc hoàn tất khi ngay từ đầu chỉ các phần tử hiển thị cần thiết được render.
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, performance
- 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
- 45/100