如何从 `*ngFor` 循环中添加 class 名称？

Question

我想在迭代器中将变量值添加为 class 名称。怎么做？

这是我的代码：

<ul class="cart-card">
    <li *ngFor="let size of sizes" class="cart-card--content" 
    [ngClass]="{'active': activeSize == size, ['size'] : size }"> //notworks
      <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 作为 class 名称。但它不起作用。如何将数据本身添加为现有 class 的 class 名称？

Answer 1

试试这个。 [class] = "size" 会将大小的值设置为 class 名称。

<ul class="cart-card">
    <li *ngFor="let size of sizes" class="cart-card--content" [class]= "size"
    [ngClass]="{'active': activeSize == size"> //now works
      <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>

Answer 2

如果您尝试在选项处于活动状态时将 class 设置为 size 值，使用三元运算符。 ngClass 也可以设置为空字符串。使用这个reference，这里有一个建议：

HTML

...
<li (click)="activeSize=size" *ngFor="let size of sizes" class="cart-card--content"
  [ngClass]=" activeSize === size ? size :''"> 
...

Demo

如何从 `*ngFor` 循环中添加 class 名称？

How to add the class name from `*ngFor` loop?

ngfor

angular

angular5