正确在Angular 10中使用Observable，值永不变

问题描述

我试图了解如何使用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。

我想念什么？

谢谢

解决方法

好的，我不会使用二传手。我会做类似的事情：

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)
}

说明：behaviorSubject具有初始值（false）。 behaviorSubject是一个Observable，因此您可以使用模板中的异步管道将其打印出来。 在ngOnInit中，behaviorSubject得到下一个true，在超时后下一个false，只是为了展示流值的变化

,

这与可观察对象无关，与Angular组件生命周期有关。

在ngOnInit（）函数中，我添加了this.loading.next（true）;但是html模板仍然显示false。

还为时过早-可观察对象在呈现模板之前之前发出一次，实际上是在任何人收听流之前发出的。但是，如果放在ngAfterViewInit而不是ngOnInit中，则相同的代码将起作用。

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