Question

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

我的服务：

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

Answer 1

您可以使用<ul className="project-links show-for-large"> {this.props.links.map(i => <li>i</li>)} </ul>指令“保护”您的模板，例如：

*ngIf

这样，<div *ngIf="req_obj"> {{req_obj.message}} </div>仅在将值分配给div后才会显示。虽然它的值为req_obj，但您的模板中会有一条评论，如下所示：

undefined

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

1 个答案: