代码之家 › 专栏 › 技术社区 › PatS

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

ngfor typescript angular

PatS · 技术社区 · 6 年前

这在本代码示例中使用 https://stackblitz.com/angular/jdamnnmgrae?file=app%2Fautocomplete-overview-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循环可能在可观察对象上循环,因为异步管道接受承诺或可观察,而它不是承诺。:-)

有用的链接:

https://angular.io/api/common/AsyncPipe
https://angular.io/guide/rx-library -对于贴图,过滤器
https://angular.io/api/forms/FormControl 用于FormControl。值更改
https://angular.io/guide/observables

我无法从FormControl中找到管道的使用方法。值发生了变化,但希望在回答这个问题时这一点会变得清晰。

(Q) 有人能给我指出一些有角度的文档来解释“*ngFor | async”语法的含义吗?或提供解释。

搜索答案显示了这些结果

Using an array from Observable Object with ngFor and Async Pipe Angular 2 -我想我的问题是类似的,但我读了答案,但没有解释,只有一个代码示例。
Use async pipe in ngFor on Observable of Observables (Angular) -我不懂更多的语法。
https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html -这似乎是我问题的答案。但既然我花了这么多时间写,我还是会把它贴出来。

1 回复 | 直到 6 年前

Daniel W Strimpel Michael Dorgan 6 年前

这个 let state of filteredStates | async 语法可以这样理解:

let state of (filteredStates | async)

这个 async 管道应用于 filteredStates 变量而非整体 for 环

我认为在查看了所有其他资源之后,这应该是显而易见的,但是 异步 管道很有用,因为它将为您订阅可观察到的内容(此外,还可以清理订阅,这样您就不必担心取消订阅)。

现在的情况是Angular订阅了 筛选状态 可观察到。每次从您的可观察对象中传出一个新列表时,角度 *ngFor 指令将在流式传输的列表上循环。

如果没有异步管道,您只需订阅 筛选状态 可在组件中观察到,并将该列表作为属性存储在组件上(然后将其循环以代替 filteredStates | 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;
        }
    }
}