在數據有機會加載之前，Ionic 2查看渲染（和錯誤）

Question

我正在寫我的第一個Ionic 2應用程序，並且正努力讓我的頭繞過離子1中我不必擔心的事情。

我有一個列表視圖，其中列出了從API中獲取的項目。這工作正常。當你點擊列表視圖中的一個項目時，你會進入一個詳細視圖（這使得另一個Ajax調用來獲取更多細節）。這個視圖在ajax調用完成之前呈現，我真的不知道爲什麼。

服務：

import {Injectable} from '@angular/core'; 
import {Http} from '@angular/http'; 
import 'rxjs/Rx'; 

@Injectable() 
export class DataService { 
    http: any; 
    baseUrl: String; 
    apiKey: String; 

    constructor(http:Http) { 
     this.http = http; 
     this.baseUrl = 'http://localhost:8100/api'; 
     this.apiKey = 'xxx'; 
    } 

    getList(token, page) { 
     return this.http.get(this.baseUrl + '/list?key=' + this.apiKey + '&token=' + token + '&page=' + page + '&per_page=20') 
      .map(res => res.json()); 
    } 

    getDetails(token, ref) { 
     return this.http.get(this.baseUrl + '/details/' + ref + '?key=' + this.apiKey + '&token=' + token) 
      .map(res => res.json()); 
    } 
} 

問題頁：

import { Component } from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 
import { Storage } from '@ionic/storage'; 
import { DataService } from '../../app/services/data.service'; 

@Component({ 
    selector: 'details', 
    templateUrl: 'details.html' 
}) 
export class DetailsPage { 
    token: string; 
    item: any; 
    ref: string; 

    constructor(public navCtrl: NavController, private dataService:DataService, private storage: Storage, public params:NavParams) { 
     this.ref = params.get('ref'); 
    } 

    getDetail(token, ref) { 
     this.dataService.getDetails(token, ref).subscribe(
      data => { 
       // this completes after the view has rendered, so the view errors 
       this.item = data; 
       console.log('this.item = '); 
       console.log(this.item); 
      }, 
      err => { 
       console.log(err); 
       // handle expired token and redirect 
      } 
     ); 
    } 

    ngOnInit() { 
     console.log('on init ran...'); 

     this.storage.get('token').then((val) => { 
      this.token = val; 
      this.getDetail(this.token, this.ref); 
     }); 
    } 
} 

在我的模板錯誤每次變種，例如，第一個是：

Runtime Error 
Cannot read property 'ref' of undefined 

我失去了一些東西明顯或有沒有更好的方法去做這件事？所有的教程，我覺得有Ajax調用的類，而不是在這不可能是正確的服務...

---編輯---

如這裏要求是從資產淨值推目錄頁：

viewDetailsPage(ref) { 
    this.navCtrl.push(DetailsPage, { 
     ref: ref 
    }) 
} 

---編輯2 ---

如這裏要求的是列表頁面模板：

<ion-header> 
    <ion-navbar> 
     <ion-title>Items</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
    <ion-list> 
     <button ion-item *ngFor="let item of items" (click)="viewDetailsPage(item.reference)" icon-start> 
      <h2>{{item.reference}}</h2> 
      <p>{{item.type.title}}</p> 
      <ion-badge item-end>{{item.status.title}}</ion-badge> 
     </button> 
    </ion-list> 
</ion-content> 

和詳細信息頁面模板：

<ion-header> 
    <ion-navbar> 
     <ion-title>Item</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content> 
     <h4>{{item.reference}}</h4> 
</ion-content> 

Answer 1

變化{{item.reference}}到{{item?.reference}}

或

item: any = {}的item: any代替;

由於在ajax調用之前查看渲染，它試圖獲得reference屬性item。由於item仍然是任何類型而不是對象，因此會引發錯誤。

{{item?.reference}}來處理異步變量。

Answer 2

不能夠一個「彈出」頁面，讓AJAX調用我最終作出從列表頁getDetail Ajax調用，而不是和傳遞數據的地方找到一個簡單的例子之後詳情頁面，如：

列表頁，列表項被點擊時：

viewDetailsPage(ref) { 
    this.DataService. getDetails(this.token, ref).subscribe(
     data => { 
      this.item = data; 

      this.navCtrl.push(DetailsPage, { 
       item: this.item 
      }) 
     }, 
     err => { 
      console.log(err); 
      // handle expired token and redirect 
     } 
    ); 
} 

感覺就像這是做雖然會喜歡這樣的一些確認的正確方法。

----更新----

雖然這個工程，我結束了與接受的答案去。