Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cdkVirtualFor doesn't detect changes in array #14501

Open
Arap919 opened this issue Dec 13, 2018 · 2 comments · May be fixed by #14639
Open

cdkVirtualFor doesn't detect changes in array #14501

Arap919 opened this issue Dec 13, 2018 · 2 comments · May be fixed by #14639
Labels
area: cdk/scrolling P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@Arap919
Copy link

Arap919 commented Dec 13, 2018

What is the expected behavior?

Delete or add items to array is displayed

What is the current behavior?

cdkVirtualFor doesn't respond to changes in the incoming array

What are the steps to reproduce?

https://stackblitz.com/edit/angular-jttzzn

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

See angular dependencies in stackblitz. Chrome 70.0.3538.110
@dnbo
Copy link

dnbo commented Dec 14, 2018

This isn't because of how the virtual scroll CDK works but instead of how the default Angular change detection works. The change detection wont trigger on array mutations, which causes your example to fail. One way to solve it is to create a copy of your array after the mutation is done, and it will work.

See working example:

https://stackblitz.com/edit/angular-f8kyeb

@crisbeto crisbeto self-assigned this Dec 26, 2018
@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent has pr labels Dec 26, 2018
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 26, 2018
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
9fd7f78 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
@crisbeto crisbeto linked a pull request Dec 26, 2018 that will close this issue
Open
crisbeto added a commit to crisbeto/material2 that referenced this issue Dec 26, 2018
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
772d621 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 30, 2019
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
eb25578 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
crisbeto added a commit to crisbeto/material2 that referenced this issue May 24, 2019
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
e206d12 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 9, 2020
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
2df2b2c 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
crisbeto added a commit to crisbeto/material2 that referenced this issue Mar 6, 2020
@crisbeto
fix(scrolling): virtual list not updating when source array is mutated
cc127ab 
When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource` which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data has changed. These changes add a new type of data source that will allow us to detect changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
@sarthak-k
Copy link

Any update on this issue?

crisbeto added a commit to crisbeto/material2 that referenced this issue Feb 17, 2021
@crisbeto
fix(cdk/scrolling): virtual list not updating when source array is mu…
42ed989 
…tated

When an array is passed to `cdkVirtualFor`, it falls back to creating an `ArrayDataSource`
which won't emit if the array has changed. Since the intention of the `cdkVirtualFor` is to
be (more or less) a drop-in alternative for `ngFor`, it is expected that it'll update if the data
has changed. These changes add a new type of data source that will allow us to detect
changes on the data and to update the view.

Fixes angular#14635.
Fixes angular#14501.
@mmalerba mmalerba removed the has pr label Dec 8, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area: cdk/scrolling P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/scrolling): virtual list not updating when source array is mutated crisbeto/material2
6 participants
@dnbo @crisbeto @sarthak-k @mmalerba @andrewseguin @Arap919