Как добавить имя класса из значения итерации объекта?

Question

Я пытаюсь добавить имя класса из объекта итератора со статическим значением. Я получаю сообщение об ошибке, как добавить имя класса из итератора?

<ul style="font-size: 20px">
    <li *ngFor="let link of socialLinks" [ngClass]="{ 'icon' + link.label}">{{link.label}}</li>
</ul>

Я добавляю icon в качестве статического и link.label из объекта.

Answer 1

... Добавить немного больше объяснений.

Когда вы используете привязку атрибута [] в левой части любого атрибута, вам не нужно использовать {{}} в правой части, потому что привязка атрибута сама оценивает правую часть как выражение.

<li *ngFor="let link of socialLinks" [ngClass]="{ 'icon' + link.label}">{{link.label}}</li>

Итак, в данном случае вы просите angular оценить "{ 'icon' + link.label}", тогда как link.label уже является выражением. Так вот почему вам нужно только в такое время -

<li *ngFor="let link of socialLinks" [ngClass]="'icon' + link.label">{{link.label}}</li>

Answer 2

Не нужны скобки.

  <li *ngFor="let link of socialLinks" [ngClass]="'icon' + link.label">{{link.label}}</li>