Ionic 2 - 将 ID 从 json 传递到子（详细信息）页面答案

【问题标题】：Ionic 2 - Passing ID from json to child (details) pageIonic 2 - 将 ID 从 json 传递到子（详细信息）页面
【发布时间】：2017-07-13 20:20:56
【问题描述】：

我有一个提供者服务，它从我的 API 调用 get 请求。然后我有一个列表页面，您可以在其中滚动浏览许多食谱。我正在努力获取每个食谱的 ID 并将其传递到详细信息页面，因为这需要包含在其中。

我的服务请求是针对列表的

loadCategory1() {
  var url = "http://api.yummly.com/v1/api/recipes?_app_id=////&_app_key=////";

  if (this.Category1) {
    return Promise.resolve(this.Category1);
  }

  return new Promise(resolve => {
    this.http.get(url + "&allowedAllergy[]=396^Dairy-Free&allowedAllergy[]=393^Gluten-Free&maxResult=50&start=10")
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.Category1 = data.matches;
        resolve(this.Category1);
      });
  });
}

我目前也有一个单独的用于我的详细信息

loadDetails() {
  if (this.details) {
    return Promise.resolve(this.details);
  }

  return new Promise(resolve => {
    this.http.get('http://api.yummly.com/v1/api/recipe/French-Onion-Soup-The-Pioneer-Woman-Cooks-_-Ree-Drummond-41364?_app_id=//////&_app_key=//////')
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.details = data;
        resolve(this.details);
      });
  });
}

正如您在详细信息请求中看到的那样，我有 French-Onion-Soup-The-Pioneer-Woman-Cooks-_-Ree-Drummond-41364 这需要动态获取 ID从每个食谱。示例如下。

在每个 .ts 文件中，我都有以下内容

  loadRecipes(){
    this.apiAuthentication.loadCategory1()
    .then(data => {
      this.api = data;
    });
   }

这允许我调用请求。

我现在不知道该怎么做，所以一些帮助会很棒。

【问题讨论】：

你的项目结构中必须有全局 variable.ts 文件！
问题是您在 apiAuthentication.ts 文件中订阅了两次，并且在每个 .ts 文件中尝试仅在每个 .ts 文件中订阅

标签： json angular typescript ionic-framework ionic2

【解决方案1】：

您的 DetailsService 可以是这样的：

loadDetails(detailsId: string) {    
  return new Promise(resolve => {
    this.http.get('http://api.yummly.com/v1/api/recipe/'+detailsId+'?_app_id=//////&_app_key=//////')
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.details = data;
        resolve(this.details);
      });
  });
}

使用参数导航到详细信息页面：

this.navCtrl.push(DetailsPage,{
            recipe: recipe
          });

您可以使用如下代码在 DetailsPage 中调用 DetailsService：

loadDetails(){
    this.apiAuthentication.loadDetails(this.recipe.id)
    .then(data => {
      this.details = data;
    });
   }

【讨论】：