在Angular中，*ngFor="；将项目从列表“异步”中删除；什么意思？

这在本代码示例中使用

有问题的代码段是：

<mat-option *ngFor="let state of filteredStates | async" [value]="state.name">

我还没有见过这种语法，所以我对它的作用感到困惑。当我删除异步调用时，代码不再工作，所以我需要理解它

我相信这段代码正在创建一个被发送到异步管道的可观察对象列表，但我还没有看到Angular的文档中记录了这一点。如果你知道，请回复

import {map} from 'rxjs/operators/map';

export class AutocompleteOverviewExample {
// . . . other stuff omitted
  filteredStates: Observable<any[]>;

  constructor() {
    this.filteredStates = this.stateCtrl.valueChanges
    .pipe(
      startWith(''),
      map(state => state ? this.filterStates(state) : this.states.slice())
   );

从'rxjs/operators/map'导入{map}；
导出类自动完成概述示例{
//…遗漏了其他内容
过滤状态：可观察

-对于地图，请使用过滤器

对于FormControl.valueChanges



我还无法从FormControl.valueChanges中找到管道的使用方法，但希望在回答这个问题后这一点会变得清晰

（Q）有人能给我指一些有角度的文档来解释“*ngFor|async”语法的含义吗？或者提供一个解释。

搜索答案显示了这些结果


-我认为我的问题与此类似，但我阅读了答案，但没有解释，只有一个代码示例

-我不懂更多的语法

-这看起来像是我问题的答案。但因为我花了这么多时间写，我还是会把它贴出来

可以将
let state of filteredStates | async
语法视为：

let state of (filteredStates | async)

async
管道应用于
filteredStates
变量，而不是整个
for
循环

我认为，在查看了所有其他资源之后，这一点应该是显而易见的，但是
async
管道非常有用，因为它将为您订阅可观察的内容（另外还将清理订阅，这样您就不必担心取消订阅）

因此，Angular正在订阅您的
filteredStates
observable。每次从您的observable流式传输一个新列表时，Angular
*ngFor
指令都会在流式传输的列表上循环

如果没有异步管道，您只需订阅组件中可观察到的
filteredStates
，并将该列表存储为组件上的属性（然后将其循环以代替
filteredStates | async
）.注意：有几种方法可以处理退订，这只是一种方法



类自动完成概述示例{
filteredStates:状态[]=[]；
订阅：订阅=null；
构造函数（）{
this.subscription=this.stateCtrl.valueChanges
.烟斗(
startWith（“”），
映射（state=>state？this.filterStates（state）：this.states.slice（）
)
.subscribe（states=>this.filteredStates=states）；
}
恩贡德斯特罗（）{
如果（此订阅）{
this.subscription.unsubscripte（）；
this.subscription=null；
}
}
}
看不到难以理解的内容。您已经清楚地找到了
AsyncPipe
文档，那么您还需要什么呢？这意味着filteredStates是一个承诺或可观察的，在组件初始化时未初始化/定义，并将在未知时间异步解析。当它执行for循环时，它将取消并显示该模板与其他类似于数组的iterables不同，如果数组未定义或不可用，它将在组件初始化过程中引发错误感谢您展示了执行相同操作的另一种方法。您的代码示例帮助我了解了async正在执行的操作。现在，很明显：-）再次感谢！