bug(cdk-experimetal/scrolling): Every item of input array is rendered initially
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
Beitragsleitfaden
Rechercherichtung
Beginne damit, das bereitgestellte cdkVirtualFor-Beispiel mit 1,000 Elementen fester Höhe zu reproduzieren, und untersuche die gerenderten Elemente vor und nach dem Scrollen. Verfolge das Verhalten von cdkVirtualFor und autosize, um festzustellen, warum beim anfänglichen Rendern jedes Element enthalten ist; abgeschlossen ist die Aufgabe, wenn von Anfang an nur die benötigten sichtbaren Elemente gerendert werden.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend, performance
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100