Ionic 2 Yummly API error

Question

我目前正在使用 Yummly API 在 Ionic 2 框架中构建一个食谱应用程序。我已经设法从在线资源中提取 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);
          });
      });
    }
    }

我的课程是：

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

在 HTML 中，我收到错误

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

如果有人能指出我哪里出错了，那就太好:)

Answer 1

{{cookTime}}在您的

代码中不存在。你在你的视野中什么都没召唤。如果不先分配属性，则无法在视图上的调用中引用该属性。快速解决方法是仅添加

{{data1[8]}}

但是您可能希望根据应用程序上所需的整体功能专门实例化cookTime。 所以你的打字稿文件会像

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

将其

添加到 load（） 方法中似乎也不是一个好主意，但这完全是另一个问题。

Answer 2

我的最终代码如下

<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>