Angular 将外部数据输入到Ionic 2中的主/详细设置中

试图抓住Ionic2。有人能看到我在获取产品装载主列表时遗漏了什么吗？我想这里可能也需要一些数据查询。我假设我的详细信息页面应该是正常的，不需要任何额外的导入，只需要NavParams get请求

这是我设置的Github repo

---

好的，有两件事，首先你的导入是错误的，如果你有如下的包结构

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

并且从您正在调用的

master.ts

从“../pages/Detail/Detail”导入{Detail}，

。

将跳回一个目录（当前：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>

{{sheetsu}}

您的代码看起来是正确的，可以通过将Sheetsu移动到ngModel的提供商来减少未来的代码。然后，您的

sheetsu.getRemoteData（）

只是

console.log

是您的数据。（我想这不是你想要的）因此，在您的主页上，您当前无法打印远程数据。请详细说明您遇到的实际问题。这是build-goo.gl/2qawFS上的当前错误，但我无法使用*ngs获得master中的产品列表，该产品应加载感谢您花时间提供帮助，现在看起来好多了。非常感谢，勾选。没问题，如果您遇到任何其他问题，只需问另一个问题/给我发消息，我在[ionic2]标签上非常活跃，其他两个也很活跃。谢谢您，主机正在加载（某种程度上），但详细信息页面显示良好。这是正在运行的应用程序和DOM的屏幕截图，有什么东西阻止了名称的显示？GitHub应该是导致此问题的最新代码。啊，当列表中的对象的属性是

product\u name

时，您正在尝试

{{product\u name}}

。由于您迭代列表并将名称

sheetsu

分配给列表的当前对象，请尝试

{{{sheetsu.product_name}}

Awesome！就这样，太棒了。奇怪的是，detail页面上有{data.apple_cat}}，在数据输入后加载良好。总之，一切都很好：-）

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