When using the AsyncPipe inside of an *ngIf, if the Observable connected to the AsyncPipe pushes its values before the *ngIf becomes true, the value returned from the AsyncPipe will be incorrect.
例如，假设我有：
<div *ngIf="showPipe">
<div *ngFor="let item of arrObs | async">{{item}}</div>
</div>
然后说事件按此顺序发生：
showPipeis falsearrObspushes [1,2,3]showPipeis set to true
From what I've seen, the *ngFor will act as if arrObs | async returned null.
One solution to this problem is to use [hidden] instead, but there are a lot of benefits to *ngIf, like performance and making null handling easier.
正确的方法是什么？我是否应该根本不使用可观察对象来显示内容？我以为使用可观察的是最角度的工作方式。
Surround your structure in an
ng-containerwhich contains the async pipe and stores the value in a variable usingas. Also use theng-ifdirective to load the container only after you get a value in that async pipe.There are some ways you can solve this. I would suggest adding a
shareReplayoperator on yourObservable:这样，您将始终收到有关订阅的最新数据。
There are also ways to handle this in the template and still maintain the
*ngIfbenefits:Or if you don't want the
*ngIfto wait for the observable