錯誤錯誤：未捕獲的（在承諾）：類型錯誤：無法讀取的不確定離子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>