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>