angular - *ngIf 带有多个异步管道变量

Question

一直在尝试将两个 observable 组合成一个 *ngIf 并在两者都发出时显示用户界面。

采取:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>

发件人:Putting two async subscriptions in one Angular *ngIf statement

就编译而言，这是有效的，但是在我的例子中，language$ 和 user$ 将来自两个 HTTP 请求，看起来 user$ 抛出运行时错误，例如 TypeError: _v.context.ngIf.user is undefined。

本质上我真正想要的是(这行不通):

<div *ngIf="language$ | async as language && user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
</div>

是最好的解决方案:

• 在组件内部订阅并写入变量
• 用 withLatestFrom
组合组件内的两个 observable
• 添加空检查{{userLanguage?.user}}

Answer 1

这种情况应该用嵌套的 ngIf 指令来处理:

<ng-container *ngIf="language$ | async as language">
  <div *ngIf="user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
  </div>
<ng-container>

缺点是 HTTP 请求会串行执行。

为了同时执行它们并且仍然有 language 和 user 变量，需要更多的嵌套:

<ng-container *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
  <ng-container *ngIf="userLanguage.language as language">
    <ng-container *ngIf="userLanguage.user as user">
      <div><b>{{language}}</b> and <b>{{user}}</b></div>
    </ng-container>
  </ng-container>
</ng-container>

更有效的方法是此时将逻辑从模板移动到组件类，并创建一个单独的可观察对象，例如使用 withLatestFrom