angular2根据某些变量值设置背景颜色

Question

我有一个倒数到0的计数器，我想根据计数器值设置元素的背景颜色：

• 绿色：20或更高
• 橙色：10到20
• 红色：9或更低

我所做的是对元素应用3个不同的类，并为每个元素赋予不同的条件：

<p [class.green]="20 <= counter" [class.orange]="10 <= counter && counter <= 20" [class.red]="10 > counter">
  {{ counter }}
</p>

是否有更好的（或至少更正确的）方法来实现预期的结果？

Answer 1

我认为使用[ngClass]="getColor(counter)" 绑定更简洁的方式：

{{1}}

请注意，您应避免在模板中放入过多逻辑，以使其更易读，更易于理解。也许在组件中使用方法：

component.ts ：

{{1}}

模板：

{{1}}

Answer 2

恕我直言，没关系。

另一种方法是在组件中有一个函数并分配一个属性为'orange'，'green'或'red'的属性，并在类中使用该属性，例如class =“{{statusAlert} }”。如果您想在模型中而不是在模板中拥有所有检查器，那么只需替代方法。如果你这样做，那个var可以重用于模板中的其他元素，而使用你的方法，你应该为你想要分配该类的每个元素实现它。