Question

组件：

loading: boolean = false;
loading$ = new Subject<boolean>();

ngOnInit(): void {
  this.loading$.subscribe(e => { this.loading = e; });
  ...
}

模板：

<div *ngIf="loading$ | async">
   <h1>Loading 1 ...</h1>
</div>

<div *ngIf="loading">
   <h1>Loading 2 ...</h1>
</div>

Loading 2适用，但Loading 1不适用。可能是什么原因？

Answer 1

尝试从代码中删除订阅-async将自动执行该操作。

loading: boolean = false;
loading$ = new Subject<boolean>();

ngOnInit(): void {

}

Answer 2

这是因为您的loading$主题没有任何初始值。

您需要将值传递给主题或使用BehaviorSubject

第一种方式：

loading: boolean = false;
loading$ = new Subject<boolean>();

constructor() {
  this.loading$.next(true);
}

第二种方式：

loading$ = new BehaviorSubject<boolean>(true);

进一步阅读：