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>

Ngif else 异步数据数据

Ngif else Async data data

angular

angular2-template

angular6

angular2-directives