在Angular中，*ngFor=“let item from list | async”是什么意思？

Question

这在本代码示例中使用https://stackblitz.com/angular/jdamnnmgrae?file=app/autocomplete-概述-example.ts。

有问题的代码段是：

<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())
   );

因此，for循环可能会在可观察对象上循环，因为异步管道接受promise或可观察，而不是promise。：-）

有用链接：

>

https://angular.io/api/common/AsyncPipe

https://angular.io/guide/rx-library-用于地图，过滤器

FormControl.value更改的https://angular.io/api/forms/FormControl

https://angular.io/guide/observables

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

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

搜索答案显示了这些结果

>

在ngFor中使用异步管道对可观测的（角）-更多的语法我不明白。

https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html -这似乎是我问题的答案。但既然我花了这么多时间写，我还是会把它贴出来。

Answer 1

filteredStates的let state | async语法可以这样理解：

let state of (filteredStates | async)

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

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

所以，发生的事情是Angular订阅了你的filteredState可观察的。每次从您的可观察列表流式传输新列表时，Angular*ngFor指令将循环遍历流式传输的列表。

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

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

class AutocompleteOverviewExample {
    filteredStates: State[] = [];
    subscription: Subscription = null;

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

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
            this.subscription = null;
        }
    }
}