angular / angular/components

virtual-scroll doesn't work well with animate.leave

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

説明

### Which @angular/* package(s) are the source of the bug?

virtual-scroll

### Is this a regression?

No

### Description

1. With a default `cdkVirtualForTemplateCacheSize` set to `20` virtuall-scroll keeps `leave` class on a template and uses this template for next row generation; in that case, new rows turn out to be `hidden`.
2. With a `cdkVirtualForTemplateCacheSize` set to `0` to disable cache virtuall-scroll do not remove rows while slow/normal scroll speed, and only removes on a high speed scrolling.

### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-n4xn2i7p?file=src%2Fmain.ts

### Please provide the exception or error you saw

```true

```

### Please provide the environment you discovered this bug in (run `ng version`)

```true
Angular CLI : 21.2.2
Angular : 21.2.4
Node.js : 22.22.0
Package Manager : npm 10.8.2
Operating System : linux x64

┌───────────────────────────┬───────────────────┬───────────────────┐
│ Package │ Installed Version │ Requested Version │
├───────────────────────────┼───────────────────┼───────────────────┤
│ @angular/animations │ 21.2.4 │ ^21.2.4 │
│ @angular/build │ 21.2.2 │ ^21.2.2 │
│ @angular/cli │ 21.2.2 │ ^21.2.2 │
│ @angular/common │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler │ 21.2.4 │ ^21.2.4 │
│ @angular/compiler-cli │ 21.2.4 │ ^21.2.4 │
│ @angular/core │ 21.2.4 │ ^21.2.4 │
│ @angular/forms │ 21.2.4 │ ^21.2.4 │
│ @angular/material │ 21.2.2 │ ^21.2.2 │
│ @angular/platform-browser │ 21.2.4 │ ^21.2.4 │
│ @angular/router │ 21.2.4 │ ^21.2.4 │
│ rxjs │ 7.8.2 │ ^7.8.1 │
│ typescript │ 5.9.3 │ ^5.9.3 │
│ zone.js │ 0.16.0 │ ^0.16.0 │
└───────────────────────────┴───────────────────┴───────────────────┘
```

### Anything else?

_No response_

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

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

調査の方向性

src/main.ts にあるリンクされた StackBlitz の再現から始め、スクロールしながら cdkVirtualForTemplateCacheSize の両方の設定を再現します。virtual-scroll のエントリポイントとアニメーションの挙動を追跡します。完了の条件は、キャッシュされた行が leave クラスを保持したままになったり非表示になったりせず、キャッシュされていない行が低速および通常のスクロールだけでなく高速スクロール中にも削除されることです。

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

評価

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

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

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