angular5 - *ngIf 中的 AsyncPipe

Question

我试图根据 *ngIf 中可观察到的 isComplex$ 值来显示 header 之一:

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

问题是 *ngIf 与 else 情况一起使用，而不等待 observable 发出值。如何完成两个 header 等待 observable 发出其第一个值。

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/