Question

我试图根据* ngIf中isComplex$可观察的值显示其中一个标题：

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

问题是*ngIf与其他情况一致，而不等待observable发出值。如何完成两个标头等待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/

Answer 2

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

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

2 个答案: