Vorlage lädt zuerst vor dem Konstruktor in Ionic 2 App

Question

Ich arbeite an einer ionischen 2 App. Ich versuche, einen Service in meiner Komponente aufzurufen und versuche, in der Vorlage darauf zuzugreifen. Aber das Problem, mit dem ich konfrontiert bin, ist, dass die Vorlage zuerst geladen wird und dann die Versprechensausgabe in meiner Komponente erfolgreich ist. So bekomme ich einen undefinierten Fehler von der Vorlage, wenn ich versuche, auf 'req_obj' Werte zuzugreifen. Wie stelle ich sicher, dass das Versprechen zuerst gelöst wird und dann wartet meine Vorlage auf die Ausgabe?

Mein Service:

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

Meine Komponente:

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 Antwort von der 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}]} 

Answer 1

Sie *ngIf Direktive Ihre Vorlage verwenden können, "schützen", für Beispiel:

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

Auf diese Weise wird div nur angezeigt, nachdem der Wert req_obj zugewiesen wurde. Während es Wert undefined ist, wird es einen Kommentar in Ihrer Vorlage, etwas wie folgt sein:

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