代码之家 › 专栏 › 技术社区 › Muzi Jack

Ngif-else异步数据

angular2-directives angular6 angular2-template angular

0

Muzi Jack · 技术社区 · 7 年前

我不想看到错误模板,因为我在等待来自API的数据,我想微调器继续加载,直到API数据被调用。现在我得到了spinner,然后是error模板,然后是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获取数据之后,将其绑定到模板。如果有错误未等待,我希望显示错误消息。

1 回复 | 直到 7 年前

1

user4676340user4676340 7 年前

你的情况是

*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>