模板首先在Ionic 2的構造函數中加載App

我正在研究離子2應用程序。我試圖調用我的組件中的服務，並嘗試在模板中訪問它。但是我面臨的問題是模板先加載，然後組件中的承諾輸出成功。所以，如果我嘗試訪問任何'req_obj'值，我會從模板中獲取未定義的錯誤。我如何確保承諾先解決，然後我的模板等待輸出？模板首先在Ionic 2的構造函數中加載App

我的服務：

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

來源

2016-09-26 Sudharsan Ravikumar

您可以使用*ngIf指令「保護」你的模板，用於例如：

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

這樣，div只有在賦值爲req_obj後纔會顯示。雖然它的價值是undefined，您的模板中會有一條評論，如下所示：

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

來源

2016-09-26 16:22:22

Thankyou。這真的幫助了我。 –

模板首先在Ionic 2的構造函數中加載App

回答

相關問題