Angular - Delete row from async pipe

Question

The most common way to delete a row from an array is

this.countries.splice(pos, 1);

You have an array "countries" and you delete 1 element from the position "pos".

How about if we use async pipe?

countries$ = this.areasService.getCountries();


*ngFor="let c of (countries$ | async); let i=index"

How can I delete the element from the position "pos"? There is no array to delete from...

Hi again. You can't delete from an Observable, it has no buffer, nor does it keep track of what elements have been sent once it sends them. You could use a real list and get rid of ` asynPipe`, or use a filter based on some criteria. — madjaoue
– madjaoue, Commented Nov 3, 2018 at 22:36
you can have a dynamic refreshing of the elements inside *ngFor without using asyncPipe. Check my answer. — madjaoue
– madjaoue, Commented Nov 3, 2018 at 22:45
When you say "delete", do you mean "not show in the view"? Can we have more context about the ngFor loop (e.g. the type of element on which it is applied)? — Martin Parenteau
– Martin Parenteau, Commented Nov 3, 2018 at 23:37

madjaoue · Accepted Answer · 2018-11-03 22:44:02Z

1

You can't delete from an Observable. It has no buffer, nor does it keep track of what elements have been sent once it sends them.

You could use an array, and the fact that angular detect changes on assignment :

countries = []

onInit

this.areasService.getCountries().subscribe( val=> this.countries =val);

html

*ngFor="let c of countries; let i=index"

Important:

when you splice, you should reassign this.countries in order to trigger change detection.

deleteEl(pos){
  this.countries.splice(pos, 1);
  this.countries = [...this.countries];
}

answered Nov 3, 2018 at 22:44

madjaoue

5,2142 gold badges22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1