在数据有机会加载之前，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 
     } 
    ); 
} 

感觉就像这是做虽然会喜欢这样的一些确认的正确方法。

----更新----

虽然这个工程，我结束了与接受的答案去。