angular / angular/components

bug(cdk-experimetal/scrolling): Every item of input array is rendered initially

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

{{item | json}}

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

Mở 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

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.