Angular中如何为<span>动态添加与属性值一致的类？

别担心，刚上手Angular遇到这类小问题太正常了！我来帮你搞定这个类绑定的需求~

首先要纠正一个小误区：你用的ng-class="{{tag?.color}}"是AngularJS（Angular 1.x）的写法，在Angular 2+里已经不再这么用啦，咱们得用新版的属性绑定语法。

最简单的解决方案：直接用[ngClass]绑定枚举值 #

如果你的Tag.Color枚举的值刚好和Semantic UI的颜色类名完全一致（比如枚举定义是Red = 'red'、Blue = 'blue'），那直接在模板里这么写就行：

<!-- TagComponent的模板 -->
<div class="tag" [ngClass]="tag?.color">
  {{ tag.name }}
</div>

这里的class="tag"是Semantic UI的基础标签类，[ngClass]="tag?.color"会动态把枚举对应的颜色类（比如red）添加到元素上，最终渲染出来的就是<div class="tag red">...</div>，刚好符合Semantic UI的要求~

处理枚举值和类名不一致的情况 #

如果你的枚举值是大写（比如Red = 'RED'）或者和类名格式不同，只需要加个简单的转换就行，比如转成小写：

<div class="tag" [ngClass]="tag?.color.toLowerCase()">
  {{ tag.name }}
</div>

为什么之前的写法不行？ #

Angular 2+的属性绑定（用[]包裹）不需要插值表达式{{}}，直接把变量/表达式放括号里就好。如果用了{{}}，相当于把枚举值转成字符串后拼到指令里，这不符合新版Angular的绑定规则，所以才会失效。

额外补充：更复杂的类绑定场景（可选） #

如果你需要根据其他条件动态切换类，可以用ngClass的对象语法，比如：

<div class="tag" [ngClass]="{
  'red': tag?.color === Tag.Color.Red,
  'blue': tag?.color === Tag.Color.Blue,
  'disabled': tag?.isDisabled
}">
  {{ tag.name }}
</div>

不过这种情况不如直接绑定枚举值简洁，适合类名和枚举值差异较大的场景。

最后别忘了在Tag类里给_color和_name添加getter方法，这样模板才能访问到这些私有属性哦：

// tag.model.ts
export class Tag {
  static enum Color {
    Red = 'red',
    Blue = 'blue',
    Green = 'green'
  }

  private _color: Tag.Color;
  private _name: string;

  constructor(color: Tag.Color, name: string) {
    this._color = color;
    this._name = name;
  }

  get color(): Tag.Color {
    return this._color;
  }

  get name(): string {
    return this._name;
  }
}

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