在Ionic 2 App中构造函数之前首先加载模板 [英] Template loading first before constructor in Ionic 2 App
问题描述
我正在研究离子2应用程序。我正在尝试在我的组件中调用服务并尝试在模板中访问它。但我面临的问题是模板首先加载，然后我的组件中的promise输出成功。因此，如果我尝试访问任何req_obj值，我会从模板中获得未定义的错误。如何确保承诺首先得到解决，然后我的模板等待获得输出？
I am working on an ionic 2 app. I'm trying to invoke a service in my component and try to access it in the template. But the issue I'm facing is that the template is loading first and then the promise output in my component is succeeding. So I get undefined error from the template if I try to access any 'req_obj' values. How do I make sure that the promise gets resolved first and then my template waits to get the output?
我的服务：
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响应：
JSON response from the api:
{"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}]}
推荐答案
你可以用 * ngIf 指示保护您的模板，例如：
You can use *ngIf directive to "protect" your template, for example:
<div *ngIf="req_obj">
{{req_obj.message}}
</div>
这样， div 将仅显示将值分配给 req_obj 。虽然它的值是 undefined ，但你的模板中会有一条评论，如下所示：
This way, div will be displayed only after value is assigned to req_obj. While it's value is undefined, there will be a comment inside your template, something like this:
<!--
template bindings={ "ng-reflect-ng-if": null }
-->
这篇关于在Ionic 2 App中构造函数之前首先加载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
