angular / angular/components

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

オープン
#15,838 コメント 4 件 リアクション 28 件 担当者 0 名 GitHub で見る
area: cdk/scrolling P4
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

#### 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. 🤷‍♂️

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

リンクされた StackBlitz で状態の漏洩を再現し、次に CdkVirtualForOf と templateCacheSize のビュー再利用の動作を調査してください。再利用されたコンポーネントが内部状態をリセットすべきか、それとも動作をより明確に文書化する必要があるかを判断し、報告されたスクロール手順に対して選択した結果を検証してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。