Связывание классов в HTML

Question

Я пытаюсь заставить мой div использовать шаблон класса тогда и только тогда, когда какое-либо значение равно 0. Если значение больше 0, я хочу использовать другой класс.Как мне легко это сделать?

 <a (click)="onItemsHeaderPanelClick()"
       [class.proj-style-display-flex.linked-items-label]="linkedItems.length > 0"
       [class.proj-style-display-flex.linked-items-label-disabled]="linkedItems.length == 0">
... </a>

Answer 1

Используйте директиву ngClass

<span class="proj-style-display-flex" [ngClass]="{linkedItems.length === 0 ? 'linked-items-label-disabled' : 'linked-items-label'}">content</span>

Answer 2

ngClass, используя оцененное выражение:

<a (click)="onItemsHeaderPanelClick()"
    [ngClass]="{
    'classA': mySuperExpressionOrVariable > 0,
    'classB': mySuperExpressionOrVariable === 0
    }">...</a>

Код объяснения:

• classA для mySuperExpressionOrVariable> 0
• classB для mySuperExpressionOrVariable === 0
• и нет класса для mySuperExpressionOrVariable <0 </li>

Существует множество способов использования ngClass:

• ngClass Использование синтаксиса строки
• ngClass Использование синтаксиса массива
• ngClass с использованием оцененного выражения
• ngClass с использованием троичного оператора
• ngClass Параметры использования

Answer 3

<span [ngClass]="[linkedItems.length ? 'case-yes-class' : 'case-no-class']">content</span>

Удачного кодирования.