Ngif else异步数据数据

Question

我不想看到错误模板，因为我正在等待来自API的数据，我希望微调器继续加载，直到调用API数据为止。 现在如何做，我得到了微调框，然后是错误模板，然后从API绑定了数据，这在逻辑上是错误的。

 import { Component, OnInit } from '@angular/core'; import { forkJoin, Subscription } from 'rxjs'; import { ActivatedRoute, Params } from '@angular/router'; import { switchMap } from 'rxjs/operators'; import { OrdersM50Service } from '../services/orders-m50.service'; import { M50Detail } from '../interfaces/order-m50.interface'; import { LookupService } from '../../shared/services/lookup.service'; import { DCLookup, OrderTypeLookup } from '../../shared/models/lookups.interface'; @Component({ selector: 'idl-m50-deliver-update', templateUrl: './m50-deliver-update.component.html', styleUrls: ['./m50-deliver-update.component.scss'] }) export class M50DeliverUpdateComponent implements OnInit { public order: M50Detail; public loading = false; public orderType: OrderTypeLookup; public dc: DCLookup; public error: any; private _paramsSub$: Subscription; private _id: string; constructor(private _ordersService: OrdersM50Service, private _lookupService: LookupService, private _route: ActivatedRoute) {} ngOnInit(): void { this.loading = true; // console.log(errorHandler); this._paramsSub$ = this._route.params .pipe(switchMap((params: Params) => { this._id = params['id']; const orderRequest = this._ordersService.getM50ById(this._id); const orderTypeRequest = this._lookupService.getOrderTypesM50(); const dcRequest = this._lookupService.getDCs(); return forkJoin([orderRequest, orderTypeRequest, dcRequest]); })) .subscribe((result: [ M50Detail, Array < OrderTypeLookup > , Array < DCLookup > ]) => { console.log('FORKJOIN RESULT', result); this.order = result[0]; this.orderType = this._getLookUpItemById(result[1], this.order.order_type); this.dc = this._getLookUpItemById(result[2], this.order.dc); this.loading = false; }, err => { console.log(err); this.error = err; this.loading = false; }); } } 

 <div class="orders-container p24"> <div class="heading"> <h1>M50 View</h1> </div> <div class="progress-cont"> <div *ngIf="loading" style="font-size: 1px" class="progress progress-fade loop info"></div> </div> <idl-m50-deliver-view *ngIf="order; else errorCont" [status]="order?.status" [order]="order" [dc]="dc" [orderType]="orderType"> </idl-m50-deliver-view> </div> <ng-template #errorCont> <idl-error-handler [errorHandler]="error"></idl-error-handler> </ng-template> 

上面代码的问题是，它在等待来自API的数据时加载错误消息，然后在完成从API中获取数据后，将其绑定到模板。 如果有未等待的错误，我希望显示错误消息。

Answer 1

你的情况是

*ngIf="order; else errorCont"

当然，如果您未在错误变量上加条件，您将看到错误消息！

鉴于您有order ， loading和error ，以下是您的条件：

<div *ngIf="loading; else notLoading">
  <spinner/>
</div>
<ng-template #notLoading>
  <component *ngIf="order && !error"/>
  <error-component *ngIf="error"/>
</ng-template>