Angular：在已有ngClass的ngFor循环中为元素添加唯一类

你之前的写法错误在于ngClass的对象语法要求键是类名字符串，值是布尔值（控制是否添加该类），直接写info.name不符合语法规则。这里给你几种可行的实现方式：

方法1：混合数组与对象语法（推荐） #

ngClass支持数组形式，可同时包含条件对象和静态类名：

<div class="b-game-card" *ngFor="let info of list" [ngClass]="[{active: isActive(info)}, info.name]">
  <div class="b-game-card__cover"></div>
</div>

数组里的第一个元素是原有的条件类逻辑，第二个元素直接传入info.name作为唯一类名。

方法2：字符串拼接（传统写法） #

直接在原生class属性里拼接条件类和唯一类：

<div 
  class="b-game-card {{ isActive(info) ? 'active' : '' }} {{ info.name }}" 
  *ngFor="let info of list"
>
  <div class="b-game-card__cover"></div>
</div>

注意：如果info.name包含空格或特殊字符，建议先处理成合法的CSS类名（比如用info.id替代，或者通过管道转换）。

方法3：自定义唯一类名（更规范） #

如果info有唯一ID字段，推荐用前缀+ID的方式生成类名，避免名称冲突：

<div class="b-game-card" *ngFor="let info of list" [ngClass]="[{active: isActive(info)}, 'game-item-' + info.id]">
  <div class="b-game-card__cover"></div>
</div>

这种方式生成的类名（比如game-item-1、game-item-2）更符合CSS命名规范，也不会因为名称重复导致样式冲突。

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