javascript - 如果 observable 使用异步管道是错误的，则 Angular 显示模板

Question

我有一个 API 调用，它可能会返回一些数据，或者如果不存在数据，可能会返回一些虚假的东西。有数据我要tap退出流并做一些副作用，但如果是假的，我希望没有副作用发生但仍显示我的模板代码。
我正在使用异步管道在模板中获取该数据，但如果数据是错误的，它将不会显示。
我已经看到了包装 ngIf 的技术有一个对象，所以它的评估结果是真实的，但它似乎不是我的代码的正确解决方案。
我的模板:

<form *ngIf="loadedData$ | async">
  ...
</form>

我的课:

loadedData$: Observable<boolean>;

ngOnInit(): void {
  this.loadedData$ = this.getCurrentBranding().pipe(
    tap(branding => {
      if (branding) {
        // Do side effects
      }
    }),
    // current hack to make the template show
    map(() => true)
  );
}

private getCurrentBranding(): Observable<Branding> {
  // API call, may return an object, or null
}

Answer 1

我已经养成了为我的组件设置一个 observable 的习惯，它可以合并多个流，将它们组合成一个状态。通常这涉及到 扫一扫运算符，但在这种情况下没有必要(尽管也许您也想合并这些副作用)。
在下面的代码获取当前品牌 将在组件中的异步管道订阅它时执行。为了防止多次执行，您可以拥有一个使用 Angular 的 的根元素。如表达式将发射转换为模板变量。或者，您可以使用 分享回放 .
开始于 运算符用于提供初始值，因此将始终显示根元素。该表单最初将被隐藏，直到从 api 返回结果。数据将来自相同的可观察对象，并从根元素处创建的模板变量访问。

this.state$ = this.getCurrentBranding().pipe(
  tap(branding => { /* Do side effects */ ),
  map(data => ({ data, isLoaded: true}),
  startWith(({ data: [], isLoaded: false})
);

<ng-container *ngIf="(state$ | async) as state">
  <form *ngIf="state.isLoaded">
    <!-- ... -->
  </form>
  <ol *ngFor="let o of state.data">
    <!-- ... -->
  </ol>
</ng-container>