在 Ionic 2 App 中的构造函数之前先加载模板答案

【问题标题】：Template loading first before constructor in Ionic 2 App在 Ionic 2 App 中的构造函数之前先加载模板
【发布时间】：2016-09-26 16:13:51
【问题描述】：

我正在开发一个 ionic 2 应用程序。我正在尝试在我的组件中调用服务并尝试在模板中访问它。但我面临的问题是模板首先加载，然后我的组件中的承诺输出成功。因此，如果我尝试访问任何“req_obj”值，我会从模板中得到未定义的错误。如何确保先解决承诺，然后我的模板等待获取输出？

我的服务：

loadTruckdetail(id)
{
if (this.truckListdetail) {
  return Promise.resolve(this.truckListdetail);
}

return new Promise(resolve => {
  this.http.get('http://demo.truckjee.com/api/trucks/' + id + '?api_token='+this.userToken)
    .map(res => {
      return res.json().truck;
    })
    .subscribe(truck => {
      this.truckListdetail = truck;
      resolve(this.truckListdetail);
      console.log(this.truckListdetail);
      console.log(this.truckListdetail.id);
    });
});
}

我的组件：

import { Component, OnInit, Injectable } from '@angular/core';
import { ionicBootstrap, Platform, Nav } from 'ionic-angular';
import { FormBuilder, FormGroup } from '@angular/forms';
import { NavController, NavParams, LoadingController  } from 'ionic-angular';
import {Dashboardparam} from '../../providers/user-data/user-data';
import {Api} from '../../providers/api/api';
import {Authentication} from '../../providers/authentication/authentication';
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'build/pages/requirement-show/requirement-show.html',
  providers: [Api]
})
@Injectable()
export class RequirementShowPage {
  myForm: FormGroup;
  req_obj: any;
  my_trucks: any;
  bids: any;
  cargo_details: any;
  payment_details: any;
  is_valid: number;

constructor(private builder: FormBuilder, private Auth: Authentication, public nav: NavController, private api: Api, navParams: NavParams, public loadingCtrl: LoadingController) {
  api.loadDetail(navParams.get('id'))
  .then( requirementValue => {
    this.req_obj = requirementValue;
console.log(req_obj);
  });
}
}

来自 api 的 JSON 响应：

{"message":"success","requirement":{"id":42,"status":0,"no_of_trucks":1,"user_id":11,"source":"Vadakkencherry, Kerala 678683, India","source_locality":"Vadakkencherry","source_district":"Palakkad","source_state":"Kerala","destination":"Chennai, Tamil Nadu, India","destination_locality":"Chennai","destination_district":"Chennai","destination_state":"Tamil Nadu","date_required":"Sep 26, 2016","date_delivery":"Sep 26, 2016","transit_time":1,"cargo_details":{},"payment_details":{},"valid_till":"2016-09-26 22:28:59","created_at":"2016-09-26 16:28:59","updated_at":"2016-09-26 16:28:59","expected_cost":"22500","created_by":11,"truck_types":[{"id":45,"requirement_id":42,"model_id":36,"created_at":"2016-09-26 16:28:59","updated_at":"2016-09-26 16:28:59"}],"bids":[]},"trucks":[{"id":6,"truck_id":"TR106","truck_number":"TN-52-J-9330","owner_id":7,"model_id":36,"description_id":269,"status":"0","short_form":"TN52 J9330","imei":"0358511020724179","current_locality":"Panniyankara","current_district":"Palakkad","current_state":"Kerala","current_lat":"10.5895666666666","current_long":"76.4524366666666","gps_updated_location":"NH544, Panniyankara, Kerala 678686, India","gps_last_updated":"2016-09-26 21:10:29","gps_updated_speed":"0","rc":"","insurance":"","pollution":"","np":"","authorization":"","created_at":"2016-06-03 18:34:03","created_by":1}]}

【问题讨论】：

标签： angular ionic2

【解决方案1】：

您可以使用*ngIf 指令来“保护”您的模板，例如：

<div *ngIf="req_obj">
    {{req_obj.message}}
</div>

这样，div 只有在赋值给req_obj 后才会显示。虽然它的值为undefined，但您的模板中会有一条注释，如下所示：

<!--
    template bindings={ "ng-reflect-ng-if": null }
-->

【讨论】：

谢谢。这对我很有帮助。