Question

我正在编写我的第一个Ionic 2应用程序，并且正在努力解决我在Ionic 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);
        });
    }
}

我的模板错误中的每个var，例如，第一个是：

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的{{1}}属性。由于item仍然是any的类型而不是对象，因此会抛出错误。

item来处理异步变量。

Answer 2

无法在＆＃34;弹出的任何地方找到单个示例＆＃34;页面进行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
        }
    );
}

这样的感觉是这样做的正确方法，虽然我会喜欢这方面的确认。

----更新----

虽然这有效，但我最终还是接受了接受的答案。

在数据有机会加载之前，Ionic 2视图呈现（和错误）

2 个答案: