无法将数据与 Angular 2 中的 ion-item 绑定

Question

>使用angular 2处理ionic-2，我得到了一个对象数组，在这些对象中我得到了一个人的详细信息。

我已经声明了一个 vardataObj: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

可能是因为您在构造函数中进行异步调用，因此页面呈现的时间仍然很早才能恢复响应??.我也在离子 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()
})  
};

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