Question

我正在创建一个配方应用程序，我有不同的类别，我想在点击时动态加载。为了提取食谱我有一个url（http get请求），我想用字符串扩展，具体取决于我点击的类别。我知道这可以通过参数来完成，但我不明白这是如何工作的，因为我是角度和离子的新手。

基本网址

http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=/////

最后，我想添加其中一个。

396^Dairy-Free 393^Gluten-Free 391^Nut-Free 393^Wheat-Free等等。有人可以请你告诉我如何实现这个

我的HTML目前是

<ion-item [navPush] = "listingPage" detail-push>
      <img src="http://placehold.it/500x500">
      <h1>Glueten Free</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 2</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 3</h1>
    </ion-item>
    <ion-item>
      <img src="http://placehold.it/500x500">
      <h1>Category 4</h1>
    </ion-item>

和HTTP请求是

    this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=////&_app_key=//////')
      .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
        console.log(data);
        this.listing = data.matches;
        resolve(this.listing);
      });
  });

目前我只在网页上加载了1个网址，但我希望根据所选的类别进行更改。非常感谢

Answer 1

当用户选择类别时，您必须传递类别ID，然后调用该函数并将类别ID传递给该函数。在该函数中，调用http方法，您可以使用URL中的类别ID。

<button click="getData(this.value)"></button>

在ts.file

中

getData(cat_id : any){
    ......
    you can use cat_id here in URL and call http method
    ......
}

使用参数动态加载页面（Ionic 2 + Angular 2）

1 个答案: