错误错误：未捕获（承诺）：TypeError：无法读取离子2中未定义的属性“名称”

问题描述

我的离子2应用程序中出现角度为2的错误，首先是

I am getting an error in my ionic 2 application with angular 2, first this

其次这个

最后这个

有时会改变顺序，但所有错误都会到来。

some times change in sequence but all error are coming.

代码

@Component({
  selector: 'page-details',
  templateUrl: 'details.html',
})
export class DetailsPage {
  id: any;
  public dataObj: any;
  public Records: any

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

  }

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


      })

  };


  ionViewDidLoad() {

    console.log('ionViewDidLoad Details');
  }

}

模板

<ion-content padding>

  <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}}</ion-label>
  </ion-item>
</ion-content>

推荐答案

dataObj 从 AJAX 填写，因此初始更改检测周期正在尝试评估 dataObj.name 表达式，其中 dataObject 没有值。

dataObj gets filled in from AJAX, so initial Change detection cycle is trying to evaluate dataObj.name expression where dataObject doesn't have value.

在这种情况下，你应该在HTML上使用安全导航操作符。

You should use safe navigation operator on HTML in such cases.

<ion-label>{{dataObj?.name}}</ion-label>

---

处理它的更好方法是使用 * ngIf else ，并显示加载内容，直到数据通过 AJAX 。

---

Better way to handle it would be have using *ngIf else, and show loading content till data comes through AJAX.

<ion-content padding *ngIf="dataObj else dataLoading">
  <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}}</ion-label>
  </ion-item>
</ion-content>
<ng-template #dataLoading>
   <ion-content padding>
     <ion-item>
       <ion-label stacked>NIC No.</ion-label>
       <ion-label>{{dataObj}}</ion-label>
     </ion-item>
  </ion-content>
</ng-template>

这篇关于错误错误：未捕获（承诺）：TypeError：无法读取离子2中未定义的属性“名称”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！