2017-02-23 10 views
0

私のAPIからget要求を呼び出すプロバイダーサービスがあります。私はその後多くのレシピをスクロールすることができるリスティングページを持っています。私が苦労しているのは、各レシピのIDを取得して詳細ページに渡すことです。リストはIonic 2 - jsonからchildへの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); 
     }); 
    }); 
} 

が要求するだけでなく、私の詳細については、別のものを持っています - オニオン - スープ - パイオニア - 女性 - クック-_- Ree-Drummond-41364これは、各レシピからIDを取得することによって動的である必要があります。例は次のとおりです。各.TS内

enter image description here

私はこれは私がリクエストを呼び出すことができます

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

を次したファイル。

私は現時点で何をすべきか分からないので、いくつかの助けが素晴らしいと思います。

+0

あなたのプロジェクト構造内には、グローバルvariable.tsファイルが必要です。 – devanshsadhotra

+0

問題はあなたのapiAuthentication.tsファイルと各.tsファイルで2回購読しています。それぞれの.tsファイルでのみ購読しようとしています –

答えて

0

あなたDetailsS​​erviceはこのようなものになることができます。

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

移動DetailsPageへの引数を持つ:

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

そして、あなたは、このようなコードを使用してDetailsPage内部DetailsS​​erviceを呼び出すことができます。

loadDetails(){ 
    this.apiAuthentication.loadDetails(this.recipe.id) 
    .then(data => { 
     this.details = data; 
    }); 
    } 
関連する問題