Angular - 在一个 ngIf 中组合两个 observables答案

【问题标题】：Angular - Combine two observables in one ngIfAngular - 在一个 ngIf 中组合两个 observables
【发布时间】：2019-07-19 19:32:50
【问题描述】：

我有一个步进器，它由单个 observable 调节

<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>

现在我想添加另一个 observable 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>;

我怎样才能正确地做到这一点？

【问题讨论】：

这样的？ - 我不太确定您的意思：*ngIf="!(categoriesLoading$ | async) && (qualificationsLoading$ | async); else loading" 您是否希望扩展第 1 行的条件？或扩展第 2 行的 for 循环？（第二个例子）
@JonasPraem 我想通过添加qualifications$ observable 来获得与第一个示例相同的结果
我会重新考虑它的设计......你可能会遇到竞争条件。我会用 .pipe() 链接这些 observables，然后等待最后一个解决并根据最终结果采取行动，而不是同时处理 2 个。
stackoverflow.com/questions/44855599/…

标签： javascript angular typescript rxjs ngrx

【解决方案1】：

您可以查看 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;
    }
);

【讨论】：

我有这个错误：Type 'OperatorFunction<boolean, boolean>' is missing the following properties from type 'Observable<boolean>': _isScalar, source, operator, lift, and 6 more.你来自哪里？