首页 文章

错误：未捕获（在承诺中）：TypeError：无法读取离子2中未定义的属性'name' [重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我在离子2应用程序中使用角度2得到错误，首先是这个

运行时错误无法读取未定义的属性“名称”

其次是这个

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

最后这个

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

有时候会改变顺序，但所有的错误都会来临 .

code

@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');
  }

}

Template

<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>
angular ionic-framework

1 回答

  • 0

    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>
    回复于

相关问题