angular / angular/components

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

Abierto
#32,943 4 comentarios 2 reacciones 0 asignados Ver en GitHub
area: cdk/scrolling gemini-triaged
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

### 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_

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con la reproducción vinculada de StackBlitz en src/main.ts y reproduce ambas configuraciones de cdkVirtualForTemplateCacheSize mientras haces scroll. Rastrea el punto de entrada del desplazamiento virtual y el comportamiento de la animación; se considera terminado cuando las filas almacenadas en caché ya no conservan la clase leave ni se ocultan, y las filas no almacenadas en caché se eliminan tanto durante el desplazamiento lento y normal como durante el desplazamiento rápido.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
angular, typescript
Área
frontend
Tipo de issue
Error
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Bastante claro
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.