错误错误：未捕获的（在承诺）：类型错误：无法读取的不确定离子2

Question

我得到我的离子2应用程序中的错误与角2，第一本

runtime error Cannot read property 'name' of undefined

其次这个属性“名”

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'name' of undefined

最后这个

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>