Question

使用ionic-2处理angular 2，我得到一个对象数组，其中我可以获取个人的详细信息。

我已声明var dataObj:any来分配我从对象获取的值。我已成功将值分配给对象，但我仍然无法在HTML / Template中显示或绑定这些值

类别：

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

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

无法使用角度2中的ion-item绑定数据

1 个答案: