Ionic 2 Yummly APIエラー

Question

現在、Ionic 2フレームワークでYummly APIのレシピアプリを作成しています。私はオンラインソースからJSONデータを取得することができましたが、APIを介してパラメータを使用するときは何も戻ってきません。誰かがこの仕組みが分かっていれば、すばらしいことになります。

私が検索：

 http://api.yummly.com/v1/api/recipe/Vegetarian-Cabbage-Soup-Recipezaar?_app_id=MYID&_app_key=MYKEY 

応答は私にデータを提供します：ページ上の

{ 
    "prepTimeInSeconds": 1800, 
     "totalTime": "1 hr 10 min", 
     "images": [ 
     { 
      "imageUrlsBySize": { 
      "90": "null=s90-c", 
      "360": "null=s360-c" 
      } 
     } 
     ], 
     "name": "Vegetarian Cabbage Soup", 
     "source": { 
     "sourceDisplayName": "Food.com", 
     "sourceSiteUrl": "http://www.food.com", 
     "sourceRecipeUrl": "http://www.food.com/recipe/vegetarian-cabbage-soup-275767" 
     }, 
     "prepTime": "30 Min", 
     "id": "Vegetarian-Cabbage-Soup-Recipezaar", 
     "ingredientLines": [ 
     "5 carrots, chopped", 
     "3 onions, chopped", 
     "5 garlic cloves, minced", 
     "1 (28 ounce) can diced tomatoes, with liquid", 
     "4 cups vegetable broth", 
     "1 medium head cabbage, chopped", 
     "1 (1 1/4 ounce) package dry onion soup mix", 
     "1 (56 ounce) can tomato juice", 
     "3 sweet bell peppers, yellow, red, orange, diced", 
     "8 -10 stalks celery, chopped", 
     "1 cup green beans (optional)", 
     "2 tablespoons oregano", 
     "2 tablespoons basil", 
     "1/2 teaspoon dried chili pepper flakes", 
     "salt & fresh ground pepper, to taste", 
     "salt & fresh ground pepper, to taste" 
     ], 
     "cookTime": "40 Min", 
     "attribution": { 
     "html": "<a href='http://www.yummly.com/recipe/Vegetarian-Cabbage-Soup-Recipezaar'>Vegetarian Cabbage Soup recipe</a> information powered by <img alt='Yummly' src='http://static.yummly.com/api-logo.png'/>", 
     "url": "http://www.yummly.com/recipe/Vegetarian-Cabbage-Soup-Recipezaar", 
     "text": "Vegetarian Cabbage Soup recipes: information powered by Yummly", 
     "logo": "http://static.yummly.com/api-logo.png" 
     }, 
     "numberOfServings": 14, 
     "totalTimeInSeconds": 4200, 
     "attributes": { 
     "course": [ 
      "Soups" 
     ] 
     }, 
     "cookTimeInSeconds": 2400, 
     "flavors": { 
     "Piquant": 0.5000, 
     "Meaty": 0.1667, 
     "Bitter": 0.1667, 
     "Sweet": 0.1667, 
     "Sour": 0.8333, 
     "Salty": 0.1667 
     }, 
     "rating": 3 
    } 

HTMLは次のとおりです。

<ion-content class="home"> 
    <ion-list> 
    <ion-item> 
     <h2>{{cookTime}}</h2> 
    </ion-item> 
    </ion-list> 
</ion-content> 

活字体である：

export class ApiAuthentication { 

    data1: any; 

    constructor(public http: Http) { 
     console.log('Hello ApiAuthentication Provider'); 
    } 

    load() { 
     if (this.data1) { 
     // already loaded data 
     return Promise.resolve(this.data1); 
     } 

     // don't have the data yet 
     return new Promise(resolve => { 
     // We're using Angular HTTP provider to request the data, 
     // then on the response, it'll map the JSON data to a parsed JS object. 
     // Next, we process the data and resolve the promise with the new data. 
     this.http.get('http://api.yummly.com/v1/api/recipe/Vegetarian-Cabbage-Soup-Recipezaar?_app_id=MYID&_app_key=MYKEY') 
      .map(res => res.json()) 
      .subscribe(data => { 
      // we've got back the raw data, now generate the core schedule data 
      // and save the data for later reference 
      this.data1 = data; 
      resolve(this.data1); 
      }); 
     }); 
    } 

    } 

そして、私のクラスがある：私は偉大な:)

Answer 1

私の最終的なコードは以下の通りである

<ion-item *ngFor="let item of api" [navPush] = "detailsPage" > 
    <div class="thumb"> 
     <img src="{{item.smallImageUrls}}"> 
    </div> 
    <div class="text"> 
     <div class="inner"> 
      <div class="title"> 
       <h1>{{item.recipeName}}</h1> 
      </div> 
      <div class="rating"> 
       <rating [(ngModel)]="item.rating"></rating> 
      </div> 
      <div class="ingredients"> 
       <p>{{item.ingredients.length}} Ingredients</p> 
      </div> 

      <div class="course"> 
       <p>{{item.attributes.course}} </p> 
      </div> 
     </div> 
    </div> 
</ion-item> 

Answer 2

{{cookTime}}であろうと、間違ったつもりだどこの誰かが指摘することができれば、私は

<!--template bindings={ 
    "ng-reflect-ng-if": null 
}--> 

のエラーを取得するHTMLで

export class HomePage { 
    public api: any; 

    constructor(public navCtrl: NavController, public navParams: NavParams, public apiAuthentication: ApiAuthentication) { 
    this.loadRecipes(); 
    } 

    ionViewDidLoad() { 
    console.log('ionViewDidLoad HomePage'); 
    } 

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

} 

あなたのコードに存在しません。あなたはあなたの意見で何も呼んでいません。最初に割り当てることなく、ビュー内のコール内のプロパティを参照することはできません。 クイックフィックスはちょうど

{{data1[8]}} 

を追加することです。しかし、あなたはおそらく、特にあなたがアプリにしたい全体的な機能に応じてcookTimeをインスタンス化します。ので、あなたのtypescriptファイルは

data1:{}; 
cookTime:string; 
constructor(public http: Http) {} 

load() { 
    if (this.data1) { 
    return Promise.resolve(this.data1); 
    } 

    return new Promise(resolve => { 
    this.http.get('url') 
     .map(res => res.json()) 
     .subscribe(data => { 
     this.data1 = data; 
     this.cookTime = data[8]; // or data.cookTime 
     resolve(this.data1); 
     }); 
    }); 
} 
... 

doesntのようなものになるだろういずれかのload（）メソッドにこれを追加するには良いアイデアのように見えるが、それは全く別の問題です。