角度ngIf如果可观察到的异步响应

时间:2019-03-04 15:54:01

标签: javascript angular typescript rxjs observable

如果没有提出多个请求就没有准备好数据,我会显示一个加载器

因此,我将使用as来重用请求。

<div class="loading-overlay" *ngIf="this.indicatorService.loadingIndicators[this?.indicatorName] && !(values$ |async as values) && !(valuesNat$ |async as natValues) ">
  <app-loading-spinner textBloc="LOADING_DATA_IN_PROGRESS"></app-loading-spinner>
</div>
<div [hidden]="!values">
  <app-chart-multi [type]="type" [name]="indicatorName" [valuesNat]="natValues" [values]="values" [objectifs]="objectifs" (weekLegend)="displayCurrentPeriodFormat()"></app-chart-multi>
</div>

实际上我得到了错误

[ERROR ->]<app-chart-multi [type]="type" [name]="indicatorName" [valuesNat]="natValues" [values]="values" [obje")

1 个答案:

答案 0 :(得分:0)

values仅在* ngIfed元素内部可用。 尝试使用else

 <ng-template #loader>loading...</ng-template>
 <ng-contaier *ngIf="this.indicatorService.loadingIndicators[indicatorName] && !(values$ |async as values) && !(valuesNat$ |async as natValues); else loader">
  <app-chart-multi [type]="type" [name]="indicatorName" [valuesNat]="natValues" [values]="values" [objectifs]="objectifs" (weekLegend)="displayCurrentPeriodFormat()"></app-chart-multi>
 </ng-container>