ERRORエラー：（約束で）キャッチされない：例外TypeError：2

Question

イオンで未定義のプロパティ「name」を読み取ることができません私は、角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は、その初期の変更検出サイクルがdataObjectが値を持っていないdataObj.name式を評価しようとしている、AJAXからで満たされます。

この場合、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>