无法将数据与角2中的离子项绑定。

Question

在ionic-2上使用angular 2，我得到了一个对象数组，其中包含了个人的详细信息。

我已经声明了一个var dataObj:any来赋值我从我的对象得到的值。我甚至已经成功地将这些值赋值给对象，但是我仍然无法在HTML /模板中显示或绑定这些值。

类：

export class DetailsPage {
  id: any;
  public dataObj: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public absService: AbsconderService, public posService: PosService) {   
     this.id = navParams.get('id'); 
     this.getData(this.id)
  }

   getData(id) {
    this.absService.getAbsconderById(id)
      .then(data => {
        this.dataObj = {
          name : data.data[0].name,
          nic : data.data[0].nic,
          fname: data.data[0].fname,
          caste: data.data[0].caste,
          residence: data.data[0].residence,
          crime_no: data.data[0].crime_no,
          us: data.data[0].us,
          ps: data.data[0].ps
        }
           console.log(this.dataObj);  
      })
  };


  ionViewDidLoad() {
    console.log('ionViewDidLoad Details');
  }

}

模板

<ion-content padding>
  <ion-grid>
    <ion-row>

      <ion-col col-12>
        <img class="background-image-sp" src="assets/images/avtar.png" />
      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-item>
    <ion-label stacked>Name</ion-label>
    <ion-label>{{dataObj.name}}</ion-label>
  </ion-item>

  <ion-item>
    <ion-label stacked>NIC No.</ion-label>
    <ion-label>{{dataObj.nic}}</ion-label>
  </ion-item>
</ion-content>

Answer 1

这可能是因为您正在构造函数中进行异步调用，所以页面呈现的时间仍然是返回响应的早期吗？而且我在Ionic 3中也遇到过这个..。您可能期望当数据绑定值发生变化时，数据绑定将自我更新.但是，有时您需要使用

import { ChangeDetectorRef } from '@angular/core';

将此对象分配给构造函数中的属性：

constructor(public navCtrl: NavController, public navParams: NavParams, public absService: AbsconderService, public posService: PosService, private changeDetector: ChangeDetectorRef) {   
     this.id = navParams.get('id'); 
     this.getData(this.id)
}

然后在你的最后把它叫来

       getData(id) {
    this.absService.getAbsconderById(id)
      .then(data => {
        this.dataObj = {
          name : data.data[0].name,
          nic : data.data[0].nic,
          fname: data.data[0].fname,
          caste: data.data[0].caste,
          residence: data.data[0].residence,
          crime_no: data.data[0].crime_no,
          us: data.data[0].us,
          ps: data.data[0].ps
        }
           console.log(this.dataObj);
           changeDetector.detectChanges()
      })  
};

你可以试试这个。让我知道