Angular中使用枚举实现分类筛选的问题及解决

核心原因 #

Angular的HttpParams是不可变对象，调用append方法不会修改原对象，而是返回一个新的实例。最初的参数设置方式没有接收这个新实例，导致请求中始终没有携带正确的筛选参数。

原错误代码（shop.service.ts） #

let params = new HttpParams();
if (category) {
  params.append('category==', category); // 错误：未接收append返回的新实例，原params无变化
}

修正后的参数设置 #

直接将append返回的新实例赋值给params，确保请求携带正确参数：

let params = new HttpParams();
if (category) {
  params = params.append('Filters', `category==${category}`);
}

这样就能构造出和Swagger中一致的请求参数格式Filters=category==CategoryX。

完整相关代码参考 #

分类枚举定义 #

export enum CategoryEnum {
    All = 'All',
    Category1 = 'Category1',
    Category2 = 'Category2',
    Category3 = 'Category3',
    Category4 = 'Category4'
}

前端分类列表渲染（shop.component.html） #

<h5 class="text-warning ml-3">Categories</h5>
<ul class="list-group my-3">
    <li class="list-group-item" 
        *ngFor="let category of categories | keyvalue"
        [class.active]="category.value === categorySelected"
        (click)="onCategorySelected(category.value)">
        {{category.value}}
    </li>
</ul>

修正后的ShopService（shop.service.ts） #

@Injectable({
  providedIn: 'root'
})
export class ShopService {
  baseUrl = 'https://localhost:5001/api/';

  constructor(private http: HttpClient) { }

  getProducts(category?: string) {
    let params = new HttpParams();

    // 排除All分类，后端直接返回全部产品
    if (category && category !== CategoryEnum.All) {
      params = params.append('Filters', `category==${category}`);
    }

    return this.http.get<IProduct[]>(this.baseUrl + 'products', {observe: 'response', params})
      .pipe(
        map(response => response.body)
      );
  }
}

ShopComponent代码（shop.component.ts） #

@Component({
  selector: 'app-shop',
  templateUrl: './shop.component.html',
  styleUrls: ['./shop.component.scss']
})
export class ShopComponent implements OnInit {
  products: IProduct[];
  categories = Object.values(CategoryEnum); // 用values确保获取枚举实际值，避免键值不一致
  categorySelected: string = CategoryEnum.All; // 默认选中全部分类

  constructor(private shopService: ShopService) { }

  ngOnInit(): void {
    this.getProducts();
  }

  getProducts() {
    this.shopService.getProducts(this.categorySelected).subscribe(products => {
      this.products = products; // 根据后端返回结构调整，若返回嵌套数据则对应修改取值路径
    }, error => {
      console.error('加载产品失败:', error);
    });
  }
  
  onCategorySelected(categoryName: string) {
    this.categorySelected = categoryName;
    this.getProducts();
  }
}

额外优化建议 #

• 用Object.values(CategoryEnum)代替Object.keys，避免枚举键和值不一致时渲染错误内容
• 初始化时默认选中All分类，加载全部产品提升用户体验
• 避免any类型，使用IProduct类型约束接口返回值，提高代码可读性
• 错误处理使用console.error更直观地定位问题

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