Question

我最近搜索了我的内置离子的应用程序，它使用http get方法从api中提取，如下所示

static get parameters() {
    return [[Http]];
}

searchRecipes(id) {
    var url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id);
    var response = this.http.get(url).map(res => res.json());
    return response;
}

到目前为止，我有id这是他们用户输入的内容。我现在想在我的搜索中添加过滤器（成分，美食和过敏），这是通过扩展来完成的该网址还包含&allowedAllergy[]和allowedDiet[]等具体来电。

我目前有一个实现的项目列表，例如，每个项目都会设置一个值，点击一个项目就会添加到提供的网址中。实施与http://www.yummly.uk/

相同

      <div class="diets">
        <ul>
          <li>Lacto vegetarian</li>
          <li>Ovo vegetarian</li>
          <li>PaleoPescetarian</li>
          <li>Vegan</li>
          <li>Vegetarian</li>
        </ul>
    </div>
    <div class="allergies">
      <ul>
        <li>Dairy-Free</li>
        <li>Egg-Free</li>
        <li>Gluten-Free</li>
        <li>Peanut-Free</li>
        <li>Seafood-Free</li>
        <li>Sesame-Free</li>
        <li>Soy-Free</li>
        <li>Sulfite-Free</li>
        <li>Tree Nut-Free</li>
        <li>Wheat-Free</li>
      </ul>
    </div>

搜索方法

食谱：任何;

searchRecipeDB(event, key) {
    if(event.target.value.length > 2) {
        this.apiAuthentication.searchRecipes(event.target.value).subscribe(
            data => {
                this.recipes = data.matches; 
                console.log(data);
            },
            err => {
                console.log(err);
            },
            () => console.log('Recipe Search Complete')
        );
    }
}

如果有人能就如何实施这一点提出建议，那将是一个救生员！谢谢大家

Answer 1

好的，这是组件：

import {Component, OnInit} from "@angular/core"
import {Http} from "@angular/http"

@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html'
})
export class MenuComponent implements OnInit
{
    diets: Array<string> = ['Lacto vegetarian', 'Ovo vegetarian', 'PaleoPescetarian', 'Vegan', 'Vegetarian'];
    allergies: Array<string> = ['Dairy-Free',
                                'Egg-Free',
                                'Gluten-Free',
                                'Peanut-Free',
                                'Seafood-Free',
                                'Sesame-Free',
                                'Soy-Free',
                                'Sulfite-Free',
                                'Tree Nut-Free',
                                'Wheat-Free'];


    id: number = 1;
    selectedDiets: Array<boolean>;
    selectedAllergies: Array<boolean>;
    allowedAllergy: Array<string>;
    allowedCuisine: Array<string>;
    url: string;

    constructor(private http: Http)
    {
        this.selectedDiets = new Array(this.diets.length).fill(false);
        this.selectedAllergies = new Array(this.allergies.length).fill(false);
    }

    ngOnInit()
    {
    }

    submit()
    {
        this.processAllergy();
        this.processDiets();
        this.searchRecipes(this.id, this.allowedAllergy, this.allowedCuisine);
    }

    processAllergy()
    {

        this.allowedAllergy = this.selectedAllergies.reduce((selectedList: Array<string>, isSelected: boolean, index: number) =>
        {
            return isSelected ? [...selectedList, this.allergies[index]] : selectedList;
        }, [])

    }

    processDiets()
    {
        this.allowedCuisine = this.selectedDiets.reduce((selectedList: Array<string>, isSelected: boolean, index: number) =>
        {
            return isSelected ? [...selectedList, this.diets[index]] : selectedList;
        }, [])

    }

    searchRecipes(id: number,
                  allowedAllergy: Array<string>,
                  allowedCuisine: Array<string>)
    {


        this.url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString());


        if (allowedAllergy.length)
        {
            this.url = this.url + `&allowedAllergy=${encodeURI(allowedAllergy.toString())}`
        }
        if (allowedCuisine.length)
        {
            this.url = this.url + `&allowedCuisine=${encodeURI(allowedCuisine.toString())}`
        }


        console.log(this.url);
        //return this.http.get(url).map(res => res.json());
    }
}

观点：

<pre>selectedDiets: {{selectedDiets | json}}</pre>
<pre>selectedAllergies: {{selectedAllergies | json}}</pre>
<pre>allowedAllergy: {{allowedAllergy | json}}</pre>
<pre>selectedAllergies: {{allowedCuisine | json}}</pre>
<div class="diets">
  <strong>Select diet regiments</strong>
  <ul>
    <li *ngFor="let diet of diets; let i = index">
      {{diet}}
      <input type="checkbox"
             [(ngModel)]="selectedDiets[i]">
    </li>
  </ul>
</div>

<div class="allergies">
  <strong>Select allergy requirements</strong>
  <ul>
    <li *ngFor="let allergy of allergies; let i = index">
      {{allergy}}
      <input type="checkbox"
             [(ngModel)]="selectedAllergies[i]">
    </li>
  </ul>
</div>
<pre>{{url}}</pre>
<button (click)="submit()">
  search
</button>

Answer 2

尝试一下它有点基本但会完成这项工作：

searchRecipes(id: number,
              allowedAllergy: Array<string>,
              allowedCuisine: Array<string>)
{
    let url = 'http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=//////&q=' + encodeURI(id.toString());

    if (allowedAllergy.length)
    {
        url = url + `&allowedAllergy=${allowedAllergy.toString()}`
    }
    if (allowedCuisine.length)
    {
        url = url + `&allowedCuisine=${allowedCuisine.toString()}`
    }

    return this.http.get(url).map(res => res.json());
}

点击即可扩展HTTP获取网址（Ionic 2 + Angular 2）

2 个答案: