angular / angular/components

Virtual Scroll template caching breaking behavior for Components with ngOnInit

Abierto
#16,330 3 comentarios 5 reacciones 0 asignados Ver en GitHub
area: cdk/scrolling P3
Lenguaje dominante
TypeScript
Estrellas
25k
Forks
6.8k
Merge medio
1 d 8 h
PR fusionados (30 d)
91

Descripción

It seems that virtual scroll is not rerunning ngOnInit of template components when template views are being cached. This results in having invalid data if the component performs initial functionality on onInit.

Note that the problem below does not happen if template caching is disabled with ```templateCacheSize: 0```.

I've replicated the issue on this stackblitz: https://stackblitz.com/edit/virtual-scroll-pointer-bug

I have the following scenario where I have a component; in the example, ```PersonComponent```; which is repeated for each element of an array within a virtual scroll vieport (see ```app.component.html```). The ```PersonComponent``` takes a ```Person``` object as an input, and onInit retrieves an ```Activity``` object based on some activity ID from an array of Activities that is cached on a service (```ActivityService```). The retrieved object is then assigned on a variable within the ```PersonComponent``` class.

The problem relies when the end user scrolls down and up in the virtual scroll container. When the elements are destroyed and recreated, it seems that the pointers of the activity variable on the ```PersonComponent``` is set to point to another incorrect value.

To replicate the problem,

- Open the stack blits above
- Take note of the Names and their associated activity.
- Scroll down on the virtual scroll container (left scroll), and then all the way up
- Note that the activities associated with the names have changed.

Note that the content of the activity array is not changing, so it's not an issue of some other process changing the content of the object pointed to. Also if you scroll on a normal non virtual scroll container (right scroll), you can note that the data remains the same and does not change.

See also the animated gif below.

![virtual scroll bug](https://user-images.githubusercontent.com/7465421/59760081-bff61700-9291-11e9-9cb1-ca9490da171a.gif)

I don't know what might be causing the problem, but it seems that it's caused by the virtual scroll functionality.

I've encounted this problem in v7 but it is also present in v8.

Also note that the values that are passed as an @Input() are not changed but remain the same.

#### Expected Behavior

It should be expected that the data that was retrieved onInit is maintained and rendered correctly.

#### Environment

- Angular: v8.0.1
- CDK/Material: v8.0.1 (also present in v7.3.6)
- Browser: Chrome
- Operating System: Ubuntu

Guía de contribución

Abrir la guía de contribución

Línea de trabajo

Comienza con el StackBlitz enlazado, especialmente con app.component.html, PersonComponent y ActivityService, y reproduce la discrepancia desplazándote hacia abajo y luego hacia arriba con el almacenamiento en caché de plantillas habilitado. Compara el comportamiento de virtual-scroll y normal-scroll y, a continuación, sigue el ciclo de vida de la vista de CDK virtual-scroll. Se considera terminado cuando la actividad sigue asociada a la persona correcta después de desplazarte repetidamente y la reproducción existente ya no muestra valores incorrectos.

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
Necesita aclaración
Aptitud para principiantes
35/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.