我有一个学校项目,我用angular作为前端,laravel作为后端来构建一个食谱搜索应用程序,并从edamams API中获取食谱。我希望能够用一些复选框来过滤我的搜索,并将“true”值转换为我在searchquery中放入的文本。我有一个对象,其中的属性是复选框,并且具有false的初始值,当选中时会变为true。
如何将这个true值转换为像'&dishType= starter'这样的文本?以及如何检查对象中的某些属性是否为true,然后将文本发送到searchquery?
这是我的searchform:
<input id="search-box" type="text" (keyup.enter)="getRecipes()" [(ngModel)]="searchquery">
<label for="starter" class="filter">
<input class="filter-checkbox" type="checkbox" id="starter" [(ngModel)]="filter.starter">
<span> Starter</span>
</label>
<label for="main" class="filter">
<input class="filter-checkbox" type="checkbox" id="main" [(ngModel)]="filter.main">
<span>Main</span>
</label>
<label for="dessert" class="filter">
<input class="filter-checkbox" type="checkbox" id="dessert" [(ngModel)]="filter.dessert">
<span class="checkbox-text">Dessert</span>
</label>
<button type="button" (click)="getRecipes();">Search</button>
这是我的目标
filter = {
starter: false,
main: false,
dessert: false,
};
和我的函数来获取食谱:
getRecipes() {
this.loadRecipes = true; // Ignore
this.recipeShow = false; // Ignore
console.log(
this.filter.starter,
this.filter.main,
this.filter.dessert,
);
this.recipeService
.getRecipes(this.searchquery, // Here is where i want to put the filter values)
.subscribe((result) => {
this.recipeShow = true; // Ignore
this.loadRecipes = false; // Ignore
let searchedWord = this.searchquery; // Ignore
let recipes = result.hits.map((data: any) => {
let recipe = data.recipe;
recipe.idref = data._links.self.href.slice(38, 70);
return recipe;
});
this.allRecipes = recipes;
this.word = searchedWord;
});
}
下面是我在recipe.service.ts中的函数:
getRecipes(q: string, filter: string) {
let searchquery =
this.urlConfig +
'?type=public&q=' +
q +
'&app_id=' +
this.appid +
'&app_key=' +
this.appkey +
filter +
'&field=label' +
'&field=idref' +
'&field=image' +
'&field=ingredientLines' +
'&field=yield' +
'&field=shareAs' +
'&field=totalTime' +
'&field=healthLabels' +
'&field=dietLabels' +
'&field=mealType' +
'&field=dishType' +
'&field=cuisineType';
return this.http.get<any>(searchquery, this.httpOptions);
}
1条答案
按热度按时间rpppsulh1#
您可以始终使用
'' + booleanValue
或'someString=' + booleanValue
将布尔值转换为字符串。但在这种情况下,我不确定你是否走在正确的方向上。Angulars HttpClient和Laravel将为你做所有的转换。你应该考虑发送POST请求。你所做的就是创建一个带有所有参数的Object,并在后端镜像该对象。
所以你会有这样的东西:
在您所称的服务中:
确保您使用JSON格式发送和接收。