ngClass 不评估

Question

当 ngClass 以 Object - keys 方式使用时，它的计算不正确。例如，如果我有 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 link

这是一个已知错误，还是我做错了什么？

Answer 1

您需要在 css 文件中的 class 名称前加一个点，如果没有点，则您正在设置标签样式。

.cbold {
  font-weight: bold
}

.citalic {
  font-style: italic
}

.cunderline {
  text-decoration: underline;
}

Answer 2

您忘记在 class 名称前的 css 中添加 .。

 .cbold {
     font-weight: bold
   }

   .citalic {
     font-style: italic
   }

   .cunderline {
     text-decoration: underline;
   }

Answer 3

您没有使用 class 选择器。

.cbold {
     font-weight: bold
   }

   .citalic {
     font-style: italic
   }

   .cunderline {
     text-decoration: underline;
   }