无法将数据与角度为2的离子项绑定
问题描述:
使用ionic-2
与angular 2
,我得到一个对象数组,其中我得到了个人的详细信息。无法将数据与角度为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>
答
可能是因为您在构造函数中进行了异步调用,所以页面呈现时的响应时间还没有提前?此外,我已经在离子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()
})
};
你可以试试这个块。让我知道
你在看什么?只是没有...你的控制台有错误吗? –
这行显示了什么'console.log(this.dataObj); '? –
它显示数据如预期 – Mangrio