Angular 异步管道和 'delay' 运算符

Question

我正在尝试用我的可观察对象模拟延迟。

我想使用异步管道解包可观察对象，并使用 'delay' 运算符添加一点延迟。

app.component.html

<ul *ngIf="items$ | async as items">
   <li *ngFor=let item of items">{{ item }}<li>
</ul>

app.component.ts

get items$(): Observable<string[]> {
    return of(['alpha', 'bravo', 'charlie', 'delta']).pipe(delay(3000));
}

但是，以这种方式进行 returns 没有 HTML 标记。删除 pipe(delay(3000)) 允许它工作。

如果我实施 'OnInit' 并检查可观察对象：

ngOnInit(): void {
   this.items$.subscribe(val => console.log(val));
}

三秒后控制台会输出：

(4) ["alpha", "bravo", "charlie", "delta"]

所以 observable 的行为就像我想要的那样，但我似乎没有正确使用异步管道。

关于异步管道的工作原理，我遗漏了什么？我如何以简单的方式模拟这种延迟？

Answer 1

您需要一个单独的 Observable 实例。每次访问您的属性 items$ 时，您的代码当前都会创建并 return 一个新的 Observable。改为创建一次。如果你愿意，你仍然可以使用 getter，只要它是每次调用都被 return 编辑的同一个 Observable 实例。

items$: Observable<string[]>;
constructor() {
  this.items$ =  of(['alpha', 'bravo', 'charlie', 'delta']).pipe(delay(3000));
}

或

private _items$?: Observable<string[]>;
get items$(): Observable<string[]> {
  if (!this._items$) {
    this._items$ =  of(['alpha', 'bravo', 'charlie', 'delta']).pipe(delay(3000));
  }
  return this._items$;
}

如果你想查看 how/why 你的原始代码失败了，你可以在 getter 中添加一个计数器，然后你可以看到正在创建和 returned 的 Observable 的数量.

  numberOfCalls = 0;
  get items$(): Observable<string[]> {
    this.numberOfCalls++;
    return of(['alpha', 'bravo', 'charlie', 'delta']).pipe(delay(3000));
  }

然后将其添加到您的模板中

calls to items$ which create and return a new observable = {{numberOfCalls}}

Angular 异步管道和 'delay' 运算符

Angular Async Pipe and the 'delay' operator

rxjs

angular

rxjs-observables