代码之家 › 专栏 › 技术社区 › Hikmat G.

异步管道

rxjs5 angular5

1

Hikmat G. · 技术社区 · 7 年前

我试图根据 isComplex$ 可观察到的信息:

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

问题是 *ngIf 与其他情况一起使用,而不等待Observable发出值。如何完成两个头等待Observable发出其第一个值。

2 回复 | 直到 7 年前

1

Vega Stipe 7 年前

不多次使用异步管道的解决方案是用异步管道将所有内容包装在一个ng容器中,然后使用 *ngFor . 但是使用 *NGOF iscompex$必须始终发出一个可匹配的。因此,我们需要在模板中使用一个新的可观测数据:

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>

2

3

Yamini Chhabra 7 年前

使用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/