Angular中Chip组件显示枚举名称而非数字的问题解决

问题原因 #

TypeScript默认的数字枚举，其成员值为数字（比如Category.MANGA对应0），直接在模板中使用{{category}}会输出数字，而非枚举的名称字符串。

解决方案一：利用枚举反向映射 #

步骤1：在组件类中暴露枚举给模板 #

修改categories.component.ts，添加代码将枚举绑定到组件实例，让模板可以访问：

@Component({
  selector: 'app-categories',
  templateUrl: './categories.component.html',
  styleUrls: ['./categories.component.css']
})
export class CategoriesComponent implements OnInit {
  // 暴露枚举给模板使用
  Category = Category;

  public categories: Category[] = [
    Category.MANGA,
    Category.DVD,
    Category.LIBRI,
    Category.COMICS
  ]

  constructor(private observableService: ObservableService) { }

  ngOnInit(): void { }

  handleClick(category: Category) {
    this.observableService.changeCategory(category);
  }
}

步骤2：修改模板中的value绑定 #

在categories.component.html里，通过枚举反向映射获取名称字符串：

<div class="categories">
  <div *ngFor="let category of categories"  class="category-item">
    <div (click)="handleClick(category)">
      <app-chip
        [value]="Category[category]"
        modifier="menu-item"
      ></app-chip>
    </div>
  </div>
</div>

使用属性绑定[value]="Category[category]"更规范，TypeScript会自动通过反向映射将数字值转换为对应的枚举名称。

解决方案二：使用字符串枚举 #

如果前后端约定传递枚举的字符串值，可以将TypeScript枚举改为字符串枚举，这样直接使用category就能得到名称：

// .\models\category.ts
export enum Category {
  MANGA = 'MANGA',
  DVD = 'DVD',
  LIBRI = 'LIBRI',
  COMICS = 'COMICS'
}

此时模板无需修改，直接保留[value]="category"即可显示名称，同时要确保Spring Boot后端的枚举也配置为返回字符串值（比如在Spring中使用@JsonValue注解）。

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