I need to call 3 different API's with different parameter based on a onChange function.
www.foods.com/api/json/v1/1/filter.php?i=chicken_breast
www.foods.com/api/json/v1/1/filter.php?c=Seafood
www.foods.com/api/json/v1/1/filter.php?a=Canadian
我有三個下拉串列類別、區域和成分，我必須呼叫三個不同的 api，它們實際上具有相同的 api 端點和 3 個不同的引數。
如果我選擇類別下拉串列，我必須致電： www.foods.com/api/json/v1/1/filter.php ?c=Seafood
如果我選擇區域下拉串列，我必須致電： www.foods.com/api/json/v1/1/filter.php ?a=Canadian
如果我選擇成分下拉串列，我必須致電： www.foods.com/api/json/v1/1/filter.php ?i=chicken_breast
HTML：
<div class="dropdown">
<select name="Categories" (change)="onCategorySelected($event)" class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Categories</option>
<option *ngFor="let foodName of foodTypeValue" [value]="foodName">{{foodName}}</option>
</select>
<select name="Area" (change)="onCategorySelected($event)" class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Area</option>
<option *ngFor="let areaName of loadArea" [value]="areaName.strArea">{{areaName.strArea}}</option>
</select>
<select name="Ingredients" (change)="onCategorySelected($event)"
class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Ingredients</option>
<option *ngFor="let ingredientsName of ingredientsList" [value]="ingredientsName">
{{ingredientsName}}</option>
</select>
</div>
是否有任何可行的方法可以通過 rxjs 運算子或任何其他方式來處理？
uj5u.com熱心網友回復：
只需添加第二個引數，它包含查詢欄位名稱。
<div class="dropdown">
<select name="Categories" (change)="onCategorySelected($event, 'c')" class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Categories</option>
<option *ngFor="let foodName of foodTypeValue" [value]="foodName">{{foodName}}</option>
</select>
<select name="Area" (change)="onCategorySelected($event, 'a')" class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Area</option>
<option *ngFor="let areaName of loadArea" [value]="areaName.strArea">{{areaName.strArea}}</option>
</select>
<select name="Ingredients" (change)="onCategorySelected($event, 'i')"
class="rounded-inputs20 select-select col-md-3">
<option value="" disabled selected>Ingredients</option>
<option *ngFor="let ingredientsName of ingredientsList" [value]="ingredientsName">
{{ingredientsName}}</option>
</select>
</div>
onCategorySelected(event, queryFieldname) {
// do your request using queryFieldname to build the url
}
編輯：
loadFilterDetails(
name: string, // fix the order of the params
queryfield: string,
): Observable<{ meals: Filter[] }> {
return this.http
.get<{ meals: Filter[] }>(
this.recipies.filterDetails `?${queryfield}=${name}` // use string literals
)
.pipe(
tap((respones) => {
this.getFilterDetails = respones?.meals;
})
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531386.html
上一篇：“Observable<unknown>”型別的引數不可分配給“OperatorFunction<Object,unknown>”型別的引數
下一篇：CSS屬性在角度中無法正常作業