AsyncPipe в * ngIf

Question

Я пытаюсь показать один из заголовков в соответствии со значением isComplex$, наблюдаемым в * ngIf:

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

Проблема в том, что *ngIf идет в другом случае, не дожидаясь, пока наблюдаемое излучитзначение.Как я могу выполнить оба заголовка, ожидая, пока наблюдаемое не выдаст свое первое значение.

Answer 1

Решение не использовать асинхронную трубу несколько раз состоит в том, чтобы обернуть все в ng-контейнер с асинхронной трубой и использовать *ngFor.Но для использования *ngFor isComplex $ всегда должен выдавать ittetable.Итак, нам нужна новая наблюдаемая для использования в шаблоне:

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>

Answer 2

Используйте 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-реактивный-шаблоны /