Question

试图掌握Ionic2。任何人都可以看到我可能缺少什么来获得产品的主列表加载？我想也许在这里也需要某种数据查询。我假设我的详细信息页面应该正常，并且不需要任何额外的导入，只需要NavParams获取请求。

这是我设置的Github回购https://github.com/jones98/Ion2Blank

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

import { DetailPage } from '../pages/detail/detail';
import { Sheetsu } from '../../providers/sheetsu';

/*
  Generated class for the Master page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-master',
  templateUrl: 'master.html',
  providers: [Sheetsu]
})
export class MasterPage {

  constructor(public navCtrl: NavController, public navParams: NavParams, public sheetsuService: Sheetsu) {}

  ionViewDidLoad() {
  this.sheetsuService.getRemoteData();
    console.log('ionViewDidLoad MasterPage');
  }

  itemTapped(event, data) {
    this.navCtrl.push(DetailPage, {
      data: data
    });
  }

}

Answer 1

好的事情，首先你的导入是错误的，如果你有像下面这样的包结构

onDetach()

从| -pages | --master | | | -- master.ts | -- detail | | | -- detail.ts .....你正在调用master.ts，import { Detail } from '../pages/detail/detail'将跳回1个目录（当前：主人），跳转到..。现在，您正在名为./pages的目录中搜索名为pages的目录，从而搜索不存在的pages。将导入更改为pages/pages/detail/detail或../../pages/detail/detail会有效。

第二个../detail/detail没有返回任何内容。将方法更改为下面的匹配

getRemoteData()

然后，在您的getRemoteData(): any{ return this.http.get('https://sheetsu.com/apis/v1.0/d0b1d8ecfc4f') .map(res => res.json()); }中，您可以通过调用以下方式检索从此api实际返回的数据：

master.ts

然后有一个包含这样的

的html文件

export class MasterPage {

  // declare publicly accessible variable
  public sheetsuData: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, public sheetsuService: Sheetsu) {}

  ionViewDidLoad() {
    this.sheetsuService.getRemoteData()
     .subscribe(response => {
       // assign variable (async)
       this.sheetsuData = response;
     });
  }

  itemTapped(event, data) {
    this.navCtrl.push(DetailPage, {
      data: data
    });
  }

}

在Ionic 2

1 个答案: