在 Angular 10 中正确使用 Observable，值永远不会改变答案

【问题标题】：using Observable in Angular 10 properly, value never changes在 Angular 10 中正确使用 Observable，值永远不会改变
【发布时间】：2020-09-01 20:33:54
【问题描述】：

我正在尝试了解如何使用 Angular 10 中的 Observables 来加载指标以及我拥有的一些 graphql 函数中的数据更改。我缺少我不理解的基本实现。

让我们以加载指示器的布尔值为例。

所以在我的组件类中我有这个：

private readonly loading = new Subject<boolean>();
get loading$(): Observable<boolean> {
 return this.loading;
}

在模板 html 文件中我有这个：

{{(this.loading$ | async) ? 'true' : 'false'}}

问题是它总是打印false

在ngOnInit() 函数中我添加了this.loading.next(true);，但html 模板仍然打印false。

我错过了什么？

谢谢

【问题讨论】：

标签： angular observable angular2-observables

【解决方案1】：

这不是关于 observables，而是关于 Angular 组件生命周期。

在 ngOnInit() 函数中我添加了 this.loading.next(true);但是 html 模板仍然打印错误。

这还为时过早 - 可观察对象发出一次，在模板被渲染之前，实际上是在任何人收听流之前。但是如果输入 ngAfterViewInit 而不是 ngOnInit，同样的代码也可以工作。

https://stackblitz.com/edit/angular-xefd3z?file=src%2Fapp%2Fapp.component.ts

【讨论】：

【解决方案2】：

好的，我不会使用 setter。我会做类似的事情：

loading$ = new BehaviorSubject(false);

ngOnInit() {
   this.loading$.next(true)
   // setTimeout should be cleared but this is just to show toggling works
   setTimeout(() => {this.loading$.next(false)}, 2000)
}

解释：behaviourSubject 有一个初始值（假）。 behaviorSubject 是一个 Observable，因此您可以使用模板中的异步管道打印它。在 ngOnInit 中，behaviourSubject 得到一个 true 的 next，超时后一个 false 的 next，只是为了展示流值的变化

【讨论】：