扩展HTTP GET URL链接点击（离子型2 +角2）

Question

我最近做内置离子我的应用程序的搜索是从一个API使用HTTP GET方法如下

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这是他们的用户输入。我现在想要添加过滤器我的搜索（配料，美食和过敏），这是通过进一步扩展url与特定的电话，如&allowedAllergy[]和allowedDiet[]。

我目前有一个实现的项目列表，例如，每个项目都会设置一个值，然后点击一个项目将添加到提供的URL中。实现是一样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()); 
}