如何用Angular从枚举生成复选框并获取选中的枚举值

架构老林

2026-6-14

解决Angular枚举生成复选框无法获取枚举值的问题

问题分析

你通过Object.values(Tags)获取枚举值数组生成复选框，但getHeroByTags方法无法正确拿到枚举值，核心原因是依赖事件对象取值的方式不够直接，或是未正确从事件对象中提取目标值。

方案一：直接传递枚举值（推荐）

无需通过事件对象，直接将循环中的tag作为参数传入方法，代码更简洁直观：

HTML模板修改

<li *ngFor="let tag of tagsText">
   <label>
      <input type="checkbox" (click)="getHeroByTags(tag)" [value]="tag"/>
      {{tag}}
   </label>
</li>

这里把(click)的参数改为tag，同时用属性绑定[value]="tag"替代插值语法，保持值的类型一致性。

组件方法修改

getHeroByTags(selectedTag: Tags) {
  // 直接使用selectedTag，已为枚举类型
  console.log('选中标签:', selectedTag);
  // 后续业务逻辑处理
}

方案二：通过事件对象获取值

如果坚持使用$event，需要正确从事件目标中提取value并转换为枚举类型：

HTML模板修改

<li *ngFor="let tag of tagsText">
   <label>
      <input type="checkbox" (click)="getHeroByTags($event)" [value]="tag"/>
      {{tag}}
   </label>
</li>

组件方法修改

getHeroByTags(event: MouseEvent) {
  const target = event.target as HTMLInputElement;
  const selectedTag = target.value as Tags;
  console.log('选中标签:', selectedTag);
  // 后续业务逻辑处理
}

需将event.target断言为HTMLInputElement才能正确访问value属性，再将字符串值转换为Tags枚举类型。