Angular - 从异步管道中删除行答案

【问题标题】：Angular - Delete row from async pipeAngular - 从异步管道中删除行
【发布时间】：2018-11-04 06:44:02
【问题描述】：

从数组中删除一行最常用的方法是

this.countries.splice(pos, 1);

您有一个数组“国家”，并从位置“pos”中删除了 1 个元素。

如果我们使用异步管道呢？

countries$ = this.areasService.getCountries();


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

如何从“pos”位置删除元素？没有要删除的数组...

【问题讨论】：

你好。您不能从 Observable 中删除，它没有缓冲区，也不会跟踪发送了哪些元素。你可以使用一个真实的列表并去掉 `asynPipe`，或者使用基于某些标准的过滤器。
您可以在不使用 asyncPipe 的情况下动态刷新 *ngFor 中的元素。检查我的答案。
当您说“删除”时，您的意思是“不在视图中显示”吗？我们能否了解更多关于 ngFor 循环的上下文（例如，应用它的元素类型）？

【解决方案1】：

你不能从 Observable 中删除。它没有缓冲区，也不会跟踪发送了哪些元素。

你可以使用一个数组，并且角度检测分配变化的事实：

countries = []

onInit

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

html

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

重要：

当您拼接时，您应该重新分配 this.countries 以触发更改检测。

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

【讨论】：