angular / angular/components

cdk-virtual-scroll: newly-rendered list items seem to inherit internal state from the _templateCache

Aperta
#15,838 4 commenti 28 reazioni 0 assegnatari Vedi su GitHub
area: cdk/scrolling P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### What is the expected behavior?

New components rendered by `CdkVirtualForOf` are pristine by default.

#### What is the current behavior?

New components created by `CdkVirtualForOf` within the `` inherit internal state of recycled views by default.

#### What are the steps to reproduce?

https://stackblitz.com/edit/angular-virtual-scrolling-with-component-state

1. Click on *Data Item 3*
1. Scroll down
1. Observe *Data Item 12* is "active"
1. Scroll down
1. Observe *Data Item 23* is "active".
1. Scroll up
1. Observe *Data Item 10* is "active" (a different one, now)

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?

```
Angular CLI: 7.3.8
Node: 11.12.0
OS: win32 x64
Angular: 7.2.12
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.13.6
@angular-devkit/build-angular 0.13.6
@angular-devkit/build-optimizer 0.13.6
@angular-devkit/build-webpack 0.13.6
@angular-devkit/core 7.1.4
@angular-devkit/schematics 7.1.4
@angular/cdk 7.3.7
@angular/cli 7.3.8
@angular/pwa 0.11.4
@ngtools/webpack 7.3.6
@schematics/angular 7.1.4
@schematics/update 0.13.8
rxjs 6.4.0
typescript 3.2.4
webpack 4.29.0
```

- Microsoft Windows 10 Pro 10.0.17763 N/A Build 17763
- Chrome Version 73.0.3683.103 (Official Build) (64-bit)
- FireFox Developer Edition 67.0b9 (64-bit)

#### Is there anything else we should know?

Surely this is the very intent of [view recycling](https://github.com/angular/material2/blob/master/src/cdk/scrolling/scrolling.md#view-recycling), but it seems very strange that the default behaviour of `*cdkVirtualFor` is very different from `*ngFor`: my bound parameters changed, the data rendered via the `@Input()` changed, so why didn't the internal state reset?

It's more than _template_ caching, which most of us would take to mean the HTML: it caches whole components and internal state.

Obviously, setting `templateCacheSize: 0` fixes this problem.

Maybe simply highlighting this in the documentation might help, since you have to read between the lines to understand what's happening? Perhaps I'm the only one with this expectation. 🤷‍♂️

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci la perdita di stato con lo StackBlitz collegato, quindi esamina CdkVirtualForOf e il comportamento di riciclo delle viste di templateCacheSize. Determina se i componenti riciclati debbano reimpostare il proprio stato interno o se il comportamento necessiti di una documentazione più chiara, quindi verifica il risultato scelto seguendo i passaggi di scorrimento segnalati.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.