Angular Service如何传递参数？API请求404问题求助

你的请求404是因为URL拼接错误：没有添加查询参数的分隔符?和参数名i=，直接把参数值拼在filter.php后面，导致生成的URL格式不符合API要求。

修复方案一：手动拼接正确的URL #

修改Service中的请求URL，补充参数标识：

loadSubCategoriesFood(name: string): Observable<{ meals: Meal[] }> {
  return this.http.get<{ meals: Meal[] }>(
    `${this.recipies.listofsubcategories}filter.php?i=${name}`
  );
}

修改后生成的URL会是符合要求的格式：https://www.themealdb.com/api/json/v1/1/filter.php?i=Beef

修复方案二：使用HttpClient的参数配置（推荐） #

利用Angular HttpClient自带的params选项，自动处理参数拼接和编码，更规范可靠：

import { HttpParams } from '@angular/common/http';

// ...

loadSubCategoriesFood(name: string): Observable<{ meals: Meal[] }> {
  const params = new HttpParams().set('i', name);
  return this.http.get<{ meals: Meal[] }>(
    `${this.recipies.listofsubcategories}filter.php`,
    { params }
  );
}

这种方式会自动生成正确的带参数URL，同时能处理参数值含特殊字符的场景，避免手动拼接的潜在问题。

内容的提问来源于stack exchange，提问作者Terry C