[英]Ngif else Async data data
i don't want to see error template as im waiting for data from API i want spinner to continue loading until API data is called. 我不想看到错误模板,因为我正在等待来自API的数据,我希望微调器继续加载,直到调用API数据为止。 with how its done now i get spinner then error template then data from API binded which is logically wrong.
现在如何做,我得到了微调框,然后是错误模板,然后从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>
the problem with the above code is that it loads error message while waiting for data from API, then after it is done getting data from the API it binds it to the Template. 上面代码的问题是,它在等待来自API的数据时加载错误消息,然后在完成从API中获取数据后,将其绑定到模板。 I want the error message to be displayed if there's an error not on wait.
如果有未等待的错误,我希望显示错误消息。
Your condition is 你的情况是
*ngIf="order; else errorCont"
Of course you will see the error message, if you don't put a condition on your error variable ! 当然,如果您未在错误变量上加条件,您将看到错误消息!
Given you have order
, loading
and error
, here are your conditions : 鉴于您有
order
, loading
和error
,以下是您的条件:
<div *ngIf="loading; else notLoading">
<spinner/>
</div>
<ng-template #notLoading>
<component *ngIf="order && !error"/>
<error-component *ngIf="error"/>
</ng-template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.