*ngIf 中的 AsyncPipe

Question

我正在尝试根据 *ngIf:

中可观察到的 isComplex$ 的值来显示 headers 之一

<complex-header *ngIf="isComplex$ | async; else ordinaryHeader"></complexheader>
<ng-template #ordinaryHeader>
  <ordinary-header></ordinary-header>
</ng-template>

问题是 *ngIf 在不等待 observable 发出值的情况下使用 else case。我怎样才能完成 headers wait for observable to emit its first value.

Answer 1

使用 angular5 *ngIf else 指令。

<div class="course-detail" *ngIf="isComplex$ | async as isComplex else ordinary">
   <complex-header *ngIf="isComplex"></complex-header>
   <ordinary-header *ngIf="!isComplex"></ordinary-header>
</div>
<!-- Showing ordinary header for cases when observable is not returned this can be replaced wuth loader as well-->
<ng-template #ordinary>
    <ordinary-header></ordinary-header>
</ng-template>

另见 https://blog.angular-university.io/angular-reactive-templates/

Answer 2

不多次使用异步管道的解决方案是用异步管道将所有内容包装在一个 ng-container 中并使用 *ngFor。但是要使用 *ngFor isComplex$ 必须始终发出一个可迭代对象。所以我们需要一个新的可观察对象在模板中使用：

isComplexIterable$ = isComplex$.pipe(map(isComplex => [isComplex]))

<ng-container *ngFor="let isComplex of isComplexIterable$ | async">
   <complex-header *ngIf="isComplex"></complexheader>
   <ordinary-header *ngIf="!isComplex"></ordinary-header>
</ng-container>

*ngIf 中的 AsyncPipe

AsyncPipe in *ngIf

rxjs5

angular5