angular - ngIf 指令中的异步管道

Question

当在 *ngIf 中使用 AsyncPipe 时，如果连接到 AsyncPipe 的 Observable 推送其*ngIf 变为真之前的值，从 AsyncPipe 返回的值将不正确。

例如，假设我有:

<div *ngIf="showPipe">
    <div *ngFor="let item of arrObs | async">{{item}}</div>
</div>

然后说事件按以下顺序发生:

1. showPipe 为假
2. arrObs 推送 [1,2,3]
3. showPipe 设置为 true

据我所见，*ngFor 的行为就好像arrObs | async 返回 null。

这个问题的一个解决方案是使用 [hidden] 代替，但是 *ngIf 有很多好处，比如性能和使 null 处理更容易。

执行此操作的正确方法是什么？我是否应该完全不使用可观察对象来显示内容？我曾假设使用 observable 是最 Angular-y 的做事方式。

编辑:我的 observable 实际上只是一个 new Subject()，我将其称为 next()。

Answer 1

有一些方法可以解决这个问题。我建议在您的 Observable 上添加一个 shareReplay 运算符:

readonly arrObs = this.someDataFromSomewhere().pipe(
  shareReplay(1)
);

_{如果您的Observable实际上是一个Subject，您也可以将其更改为BehaviorSubject 或ReplaySubject}

这样您将始终收到最新的订阅数据。

还有一些方法可以在模板中处理这个问题并且仍然保持 *ngIf 的好处:

<ng-container *ngIf="arrObs | async as arr">
  <div *ngIf="showPipe">
    <div *ngFor="let item of arr">{{item}}</div>
  </div>
</ng-container>

或者如果您不希望 *ngIf 等待 observable

<ng-container *ngIf="{ arr: arrObs | async } as data">
 <div *ngIf="showPipe">
   <div *ngFor="let item of data.arr">{{item}}</div>
 </div>
</ng-container>