当流当前为空时显示 ngIf 的正确方法答案

【问题标题】：Correct way to show ngIf when stream is currently null当流当前为空时显示 ngIf 的正确方法
【发布时间】：2022-08-19 04:03:20
【问题描述】：

我有一个页面加载不等于任何内容的流：

specificPokemonDetail$ = of({}) as Observable<Detail>;

但是稍后在用户单击按钮后，将调用 api 并为其设置一些数据：

this.specificPokemonDetail$ = this.httpService.getPokemonDetail(pokemonUrl).pipe(tap(this.scrollPage));

我的问题与模板有关。我当前的模板显示了这一点：

  <ng-container *ngIf=\"(specificPokemonDetail$ | async) as detail\">
    <div id=\"detail\">
      <div class=\"image\"><img [src]=\"detail?.sprites?.front_default\" [title]=\"detail?.name | titlecase\" /></div>
      <div class=\"stats\">
        <div class=\"name\">Name: {{detail?.name | titlecase}}</div>
      </div>
  </div>
</ng-container>

但是*ngIf=\"(specificPokemonDetail$ | async) as detail\" 会导致此容器在初始页面加载时显示。一旦对象实际包含数据，我可以更改什么以仅显示此内容？

你试过of(null)吗？
或者您可以在ngIf 中进行更多检查，例如&& Object.keys(detail).length === 0
并不是 Observable 是如何被使用的。值得查找 BehaviorSubject

标签： angular rxjs

【解决方案1】：

我得到了答案，of 可以为空。所以这是答案：

specificPokemonDetail$ = of() as Observable<Detail>;

【讨论】：