angular / angular/components

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

Offen
#23,996 1 Kommentar 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen
area: cdk/scrolling P2
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
```

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

Beitragsleitfaden

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.