ngClass не оценивает

Question

Когда ngClass используется в ключе Object-key, это не дает правильной оценки. Например, если у меня есть в HTML:

    <div [ngClass]="{'cbold': bold, 'citalic': italic, 'cunderline': underline}">Some text</div>

и в компоненте у меня есть:

   bold= false;
   underline = true;
   italic = false;

и в css у меня есть:

   cbold {
     font-weight: bold
   }

   citalic {
     font-style: italic
   }

   cunderline {
     text-decoration: underline;
   }

мой текст не будет подчеркнут. Вот что я получаю, когда проверяю:

   <div _ngcontent-sqd-c0="" class="cunderline" ng-reflect-ng-class="[object Object]">Some text</div>

Вот ссылка stackblitz

Это известная ошибка, или я что-то не так делаю?

Answer 1

Вам нужна точка перед именами ваших классов в файле css, без точки вы используете стили тегов.

.cbold {
  font-weight: bold
}

.citalic {
  font-style: italic
}

.cunderline {
  text-decoration: underline;
}

Answer 2

вы не используете селектор классов.

.cbold {
     font-weight: bold
   }

   .citalic {
     font-style: italic
   }

   .cunderline {
     text-decoration: underline;
   }

Answer 3

Вы забыли добавить . в css перед именами классов.

 .cbold {
     font-weight: bold
   }

   .citalic {
     font-style: italic
   }

   .cunderline {
     text-decoration: underline;
   }