Question

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

运行时错误无法读取属性＆＃39; name＆＃39;未定义的

其次

错误错误：未捕获（在承诺中）：TypeError：无法读取属性＆＃39;名称＆＃39;未定义的

最后这个

ERROR CONTEXT DebugContext_ {view：Object，nodeIndex：14，nodeDef： Object，elDef：Object，elView：Object}

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

码

@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>

Answer 1

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

在这种情况下，您应该在HTML上使用safe navigation operator。

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

更好的方法是使用*ngIf else，并显示加载内容，直到数据通过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：无法读取属性＆＃39; name＆＃39;离子2中未定义的

1 个答案: