Ngif else 异步数据数据
Ngif else Async data data
我不想看到错误模板,因为我正在等待来自 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 获取数据后将其绑定到模板。如果没有等待的错误,我希望显示错误消息。
你的条件是
*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>
我不想看到错误模板,因为我正在等待来自 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 获取数据后将其绑定到模板。如果没有等待的错误,我希望显示错误消息。
你的条件是
*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>