Угловой - объединить две наблюдаемые в одном NGIF - PullRequest
Новая
       5

Угловой - объединить две наблюдаемые в одном NGIF

0 голосов
/ 26 февраля 2019

У меня есть степпер, который обусловлен одной наблюдаемой 

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="categories$ | async as categories">
    <mat-step>
      <categories-form [categories]="categories"></categories-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

Теперь я хотел бы добавить кондиционирование другой наблюдаемой qualifications$

Что-то вроде этого: 

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="categories$ | async as categories">
    <mat-step>
      <categories-form [categories]="categories"></categories-form>
    </mat-step>
    <mat-step>
      <qualifications-form [qualifications]="qualifications"></qualifications-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

в контроллере: 

categories$: Observable<Array<Category>>;
categoriesLoading$: Observable<boolean>;
qualifications$: Observable<Array<Qualification>>;
qualificationsLoading$: Observable<boolean>;

как я могу сделать это правильно?

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете взглянуть на комбинационный оператор Rxjs zip, который может вам помочь.

https://www.learnrxjs.io/operators/combination/zip.html

https://rxmarbles.com/#zip

В вашем контроллере выможно создать новую наблюдаемую форму, например: 

combined$: Observable<{ categories: Array<Category>, qualifications: Array<Qualification>}> = zip(
    this.categories$,
    this.qualifications$,
    (categories: Array<Category>, qualifications:Array<Qualification>) => { 
        return { categories, qualifications };
    }
);

, которая будет объединять излучаемые значения, затем вы можете использовать ее для получения комбинированных значений: 

<ng-container *ngIf="!(categoriesLoading$ | async); else loading">
  <mat-vertical-stepper *ngIf="combined$ | async as combined">
    <mat-step>
      <categories-form [categories]="combined.categories"></categories-form>
    </mat-step>
    <mat-step>
      <qualifications-form [qualifications]="combined.qualifications"></qualifications-form>
    </mat-step>
  </mat-vertical-stepper>
</ng-container>

Также вы можете использовать zipчтобы ваши наблюдаемые загрузки ждали друг друга: 

combinedLoading$: Observable<boolean> = zip(
    this.categoriesLoading$,
    this.qualificationsLoading$,
    (categoriesLoading: boolean, qualificationsLoading: boolean) => { 
        return categoriesLoading && qualificationsLoading;
    }
);
...