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

发布于11月20日

我们一直在try 将两个观测值合并为一个*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结合起来
添加空判断{{userLanguage?.user}}

推荐答案

应使用嵌套的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