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作为类名。但它不起作用。如何将数据本身作为具有现有类的类名添加？

Answer 1

试一试。 [class] =“size”将size的值设置为类名。

<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

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

<强> HTML

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

Demo

如何从`* ngFor`循环添加类名？

2 个答案: