如何在Angular的*ngFor循环中添加变量值作为类名？

我来帮你搞定这个问题～你之前的写法是因为ngClass的语法用错了，所以没法生效。下面给你几种可行的实现方式，你可以根据需求选择：

方法1：使用ngClass的计算属性对象语法 #

这是最推荐的方式，Angular支持在ngClass的对象中用计算属性（用方括号包裹变量）来动态设置类名。只要把变量作为键，值设为true（或者判断变量是否存在的条件），就能把变量值作为类名添加：

<ul class="cart-card">
  <li 
    *ngFor="let size of sizes" 
    class="cart-card--content" 
    [ngClass]="{'active': activeSize === size, [size]: true}"
  >
    <div class="cc-content-desc">{{size}}</div>
    <div class="cc-content-image-xs"></div>
    <div class="cc-content-desc1">L+W+H=36</div>
  </li>
</ul>

解释：

• {'active': activeSize === size}：保持你原本的逻辑，当activeSize等于当前循环的size时，添加active类
• [size]: true：这里的[size]是计算属性，会把size变量的实际值（比如S、M、L）作为类名，true表示始终添加这个类（如果担心size为空，可以改成[size]: !!size，确保只有有效值才添加）

方法2：静态类拼接动态变量 #

如果不需要复杂的条件判断，也可以直接在原生class属性里拼接变量，再配合ngClass处理条件类：

<ul class="cart-card">
  <li 
    *ngFor="let size of sizes" 
    class="cart-card--content {{size}}"
    [ngClass]="{'active': activeSize === size}"
  >
    <div class="cc-content-desc">{{size}}</div>
    <div class="cc-content-image-xs"></div>
    <div class="cc-content-desc1">L+W+H=36</div>
  </li>
</ul>

方法3：使用ngClass的数组语法 #

把静态类、动态类、条件类都放进数组里，Angular会自动把数组中的真值项作为类名添加：

<ul class="cart-card">
  <li 
    *ngFor="let size of sizes" 
    [ngClass]="['cart-card--content', size, activeSize === size ? 'active' : '' ]"
  >
    <div class="cc-content-desc">{{size}}</div>
    <div class="cc-content-image-xs"></div>
    <div class="cc-content-desc1">L+W+H=36</div>
  </li>
</ul>

为什么你之前的写法不生效？ #

你之前写的['size'] : size是错误的语法：ngClass的对象语法要求键是类名（字符串或计算属性），值是布尔值来控制是否添加该类，不能用数组作为键，所以才无法生效。

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