通过调用函数问题来更改按钮类的CSS颜色

Question

在我的角度代码中，我试图为按钮分配css颜色，并且需要调用ts函数以返回css类名称。

我尝试了以下代码

NamedTempfile

在我的ts代码中，

我有这样的东西

<button style="height: 10%" class="getColor(days.date)">{{days.date}}</button>

我很快注意到class =“ getColor（）”甚至没有调用该函数。

我考虑过ngIf和ngTemplate，但不确定是否可以使用。我使用设置为4种不同的颜色作为指标，例如默认的灰色，蓝色，红色和黄色。

感谢您的帮助。谢谢。

Answer 1

您应该使用ngClass

<button style="height: 10%" [ngClass]="getColor(days.date)">{{days.date}}</button>

Repro

Answer 2

要调用该函数，您需要使用像这样的属性绑定

<button style="height: 10%" [class]="getColor(days.date)">{{days.date}}</button>

Answer 3

如果要根据条件对类进行切换，可以使用ngClass，如以下示例所示：

<div [ngClass]="{
   'example-class': condition;
   'another-class': getColor(days.date)
  }">
</div>

或者：

<div [example-class]="condition ? 'example-class' : 'other-class'"></div>