Как добавить имя класса из цикла `* ngFor`? - PullRequest
Новая
       11

Как добавить имя класса из цикла `* ngFor`?

0 голосов
/ 26 мая 2018

Я хотел бы добавить значение переменной как 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 в качестве имени класса.Но это не работает.Как добавить сами данные как имя класса с существующим классом?

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Если вы пытаетесь установить для класса значение size, когда опция активна, используйте троичный оператор.Для ngClass также может быть задана пустая строка.Используя эту ссылку , вот предложение:

HTML 

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

Демо

0 голосов
/ 26 мая 2018

Попробуйте это.[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>
...