Angular 组件在 API 响应完成之前呈现

Question

我正在使用 angular 8 开发应用程序。我有一个父组件（Bid）包含一些子组件（service1，service2），每个子组件根据数据动态加载一些数据，这些数据来自API。我在父组件 (Bid) 中调用此 API。

问题是有时在 API 完成之前呈现控件，因此页面显示为空。

我尝试在 ngOnInit() 和 constructor() 中调用 API 但结果是一样的。

组件层级如下：

RequestDetails ==> Bid ==> (Service1, Service2)

请求详细信息：

constructor(private activatedRoute: ActivatedRoute, public common: CommonService, public bidService: BidsService) {
this.activatedRoute.paramMap.subscribe((param) => {
  
  let bidID = param.get('bidId');
  if (bidID != null) {
    this.bidService.setMode('edit');
    this.getRequestDetails(param.get('id')).then(res => this.bidService.fillEditFields(bidID)) // Get fields values
  }
  else{
    this.getRequestDetails(param.get('id'));
    this.bidService.setMode('create');
  }
})}

出价：

constructor(public common: CommonService, public bidsService: BidsService, private activatedRoute: ActivatedRoute, public router: Router) {
this.loading = true;
this.bidsService.bidValue.subscribe(p => this.bid = p);
this.bidsService.bidRequestDetails.subscribe(p => this.bidRequestDetails = p);}

出价Html：

<app-net-rate-item [isFCL]="isFCL" *ngFor="let container of filterNetRate(getCurrentEditNetRate(),1)"
    [cargoDetailsId]="0" [netRateContainerType]="container.netRateContainerType"
    [netRateContainerTypeId]="container.netRateContainerTypeId" [netRateContainerAmount]="container.netRateAmount"
    (valueChange)="getNetRateValue($event, container.netRateId, 1)" [netRateType]="1" [sourceType]="sourceType"
    [disabled]="sourceType === 1 ? bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled"
    [required]="(sourceType === 1 ? !bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : !bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled)"
    [validate]="validateEvent" [value]="container">
  </app-net-rate-item>

Answer 1

您可以将 *ngIf 用于 hide/show 组件或任何 HTML 元素，在您的示例中，您必须提供一个布尔值属性来获取当前状态，如下所示：

Bid.ts

    show = false;
    constructor(public common: CommonService, public bidsService: BidsService, private activatedRoute: ActivatedRoute, public router: Router) {
    this.loading = true;
    this.bidsService.bidValue.subscribe(p => this.bid = p);
    this.bidsService.bidRequestDetails.subscribe(p => {
this.bidRequestDetails = p;
this.show = true;  // to update the state
});}

出价Html:

<div *ngIf='show'>
    <app-net-rate-item [isFCL]="isFCL" *ngFor="let container of filterNetRate(getCurrentEditNetRate(),1)"
        [cargoDetailsId]="0" [netRateContainerType]="container.netRateContainerType"
        [netRateContainerTypeId]="container.netRateContainerTypeId" [netRateContainerAmount]="container.netRateAmount"
        (valueChange)="getNetRateValue($event, container.netRateId, 1)" [netRateType]="1" [sourceType]="sourceType"
        [disabled]="sourceType === 1 ? bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled"
        [required]="(sourceType === 1 ? !bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : !bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled)"
        [validate]="validateEvent" [value]="container">
      </app-net-rate-item>
</div>

顺便提一下，您可以添加 <ng-container> 而不是外部 div 元素，因为它是一个分组元素，不会干扰样式或布局和 Angular 没有把它放在 DOM.

或者您也可以使用 hidden in Bid.Html：

    <app-net-rate-item [hidden]='!show' [isFCL]="isFCL" *ngFor="let container of filterNetRate(getCurrentEditNetRate(),1)"
        [cargoDetailsId]="0" [netRateContainerType]="container.netRateContainerType"
        [netRateContainerTypeId]="container.netRateContainerTypeId" [netRateContainerAmount]="container.netRateAmount"
        (valueChange)="getNetRateValue($event, container.netRateId, 1)" [netRateType]="1" [sourceType]="sourceType"
        [disabled]="sourceType === 1 ? bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled"
        [required]="(sourceType === 1 ? !bid.mainService.originOtherExpensePerShipmentMainService.isDisabled : !bid.mainService.destinationOtherExpensePerShipmentMainService.isDisabled)"
        [validate]="validateEvent" [value]="container">
      </app-net-rate-item>

Angular 组件在 API 响应完成之前呈现

Angular component rendered before API response completed

javascript

api

angular

angular8