使用 *ngIf 解析为 observables

【问题标题】：Using *ngIf to resolve to observables使用 *ngIf 解析为 observables
【发布时间】：2017-05-05 16:29:05
【问题描述】：

我的组件$place 和$premium 中有两个可观察对象，虽然它们不同，但模板需要它们两者来解析或页面被视为“正在加载”。

在我的模板中，我使用了适用于位置的*ngIf="($place | async); else loading; let place"，但我正在努力弄清楚如何在变量解析后将$premium 分配给它。

我尝试添加类似*ngIf="($place | async) && ($premium | async); else loading; let place; let premium" 的操作，但它会破坏位置和溢价的分配。

有没有更好的方法来处理这个问题？

【问题讨论】：

标签： angular asynchronous rxjs observable

【解决方案1】：

你可以像这样使用combineLatest 来创建一个新的 Observable：

@Component({
  selector: 'my-app',
  template: `
    <div *ngIf="placeAndPremium$ | async as placeAndPremium">
      {{ placeAndPremium.place | json }}
      {{ placeAndPremium.premium | json }}
    </div>
  `,
})
export class App {
  public place$: Observable<any>;
  public premium$: Observable<any>;
  public placeAndPremium$: Observable<any>;

  constructor() {
    this.place$ = Observable.of({somePlace: true}).delay(1000);
    this.premium$ = Observable.of({somePremium: true}).delay(2000);
    this.placeAndPremium$ = this.place$.combineLatest(this.premium$).map(x => ({place: x[0], premium: x[1]}));
  }
}

这是一个有效的 Plunkr：https://plnkr.co/edit/6dtMZevtlDli2Og3gWl9?p=preview

【讨论】：