*ngIf具有多个异步管道变量

Question

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

采取:

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

From:在一个Angular*ngIf语句中放入两个异步订阅

这可以编译,但在我的情况下编译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}}

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

Answer 2

您还可以使用以下技巧。您将需要一个额外的嵌套。

<ng-container *ngIf="{a: stream1$ | async, b: stream2$ | async, c: stream3$ | async} as o">
  <ng-container *ngIf="o.a && o.b && o.c">
    {{o.a}} {{o.b}} {{o.c}}
  </ng-container>
</ng-container>

对象 o 始终为真，因此第一个 *ngIf 简单地用于保存流值。在里面你必须用 o 命名你的变量。

Answer 3

这取决于您要什么，但是我认为带有加载标志的forkJoin运算符可能是一个好主意。

https://www.learnrxjs.io/operators/combination/forkjoin.html

forkJoin等待所有Observable完成返回其订阅中的值

Observable.forkJoin(
  Observable.of("my language").delay(1000),
  Observable.of("my user").delay(1000),
).subscribe(results => {
  this.language = results[0]
  this.user = results[1]
})

您可以将错误捕获到订阅的onError中并显示它。