Angular ngIf 可观察到的异步响应答案

【问题标题】：Angular ngIf observable response with asyncAngular ngIf 可观察到的异步响应
【发布时间】：2019-03-04 15:54:00
【问题描述】：

如果数据没有准备好，我会显示一个加载器而不发出多个请求

所以我会使用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")

【问题讨论】：

您的模板中不需要this。所有成员都自动植根于组件中。
你说得对，我会删除它，但它不能解决我的问题
this *ngIf 条件...只需将其移至 typescript 并使用普通的 rxjs 运算符。这只是不可读
你能发布完整的错误信息吗？

标签： javascript angular typescript rxjs observable

【解决方案1】：

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

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

【讨论】：