我不想看到错误模板,因为我正在等待来自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中获取数据后,将其绑定到模板。如果有未等待的错误,我希望显示错误消息。
答案 0 :(得分: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>