将外部数据馈送到 Ionic 2 中的主/细节设置中

Question

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

这是我设置的 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

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

|
-pages
|
--master
|      |
|      -- master.ts
|
-- detail
|      |
|      -- detail.ts
.....

从您调用import { Detail } from '../pages/detail/detail' master.ts，..将跳回 1 个目录（当前：master），跳转到 ./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());
}

然后，在master.ts中，您可以通过调用以下命令检索从此 API 实际返回的数据：

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
    });
  }
}

然后有一个包含类似以下内容的 html 文件

<div *ngFor="let sheetsu of sheetsuData" (click)="itemTapped($event, sheetsu)">
  {{sheetsu}}
</div>