イオニア2のコンストラクタの前にテンプレートを最初に読み込みます。

Question

私はイオン2アプリで作業しています。私は自分のコンポーネントでサービスを呼び出してテンプレートにアクセスしようとしています。しかし、私が直面している問題は、テンプレートが最初にロードされてから、コンポーネントの約束出力が成功しているということです。だから私は任意の 'req_obj'値にアクセスしようとすると、テンプレートから未定義のエラーを取得します。約束事が最初に解決された後、テンプレートが出力を得るのを待っていることを確認するにはどうすればよいですか？

マイサービス：あなたは、あなたのテンプレートを "保護" する*ngIfディレクティブを使用することができます

{"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}]} 

Answer 1

：

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); 
    }); 
}); 
} 

マイコンポーネント：APIから

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); 
    }); 
} 
} 

JSONレスポンス例：

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

このように、divは、値がreq_objに割り当てられた後にのみ表示されます。価値はundefinedですが、テンプレート内に次のようなコメントがあります。

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