Javascript 根据条件指定样式

我想根据投票的分数来更改

李的背景颜色：高还是低

<div *ngIf="upvote > downvote" [ngStyle]="{background-color: hsla(120, 100%, 50%, 0.3);}" > 

您可能应该创建两个类，每个类对应一种样式。然后您可以使用ngClass。下面的示例中，您有两个名为red或blue的类。这个条件是虚构的。你想放什么就放什么

 <div [ngClass]="{'blue': vote == 'high', 'red': vote == 'low'}"></div>

我认为在您的情况下，此代码是有效的

<div *ngIf="upvote > downvote" [ngStyle]="{'background-color':check=== 'upvote ' ? hsla(120, 100%, 50%, 0.3) : hsla(100, 20%, 40%, 0.5) }"></div>

如果要更改
upvote
上的背景色大于
downvote
上的背景色，可以按如下操作

<div [ngStyle]="{ background-color: (upvote > downvote) ? hsla(120, 100%, 50%, 0.3) : white }" >

为了实现以下预期用途，检查ngStyle内部条件的选项和代码中的问题是，由于ngIf，当向下投票>向上投票时，div将不可用

其他次要观察结果

1.在背景色和颜色周围使用引号

2.移除ngIf以处理这两个条件（upvote>downvote，downvote>upvote）并在ngStyle中移动条件

<div [ngStyle]="{'background-color': upvote > downvote? 'red': 'blue'}" >
Test
  </div>


测验

代码示例-

注意：使用
ngClass
处理更多CSS属性，以避免处理太多带有
ngStyle
的条目，ngStyle应该在div内，而不是在div外，除非您忘记发布某些内容。除此之外，您可以在背景色中直接使用三元运算符。你为什么要这么做？如果元素是falsy，ngIf将隐藏它。@briosheje它在div中！它会在游戏结束时关闭line@julia[ngStyle]适用于标记，但不会以这种方式工作。@briosheje我应该怎么做？@julia试试看，这在ngStyle中是不可能的？[ngClass]似乎更可靠地响应值的变化，而不仅仅是在初始加载时。这只是我个人的发现。另外，更好的做法是使用类来处理所有事情，而不是使用这种语法编写elseif的内联styleshow？？exp如果向上投票>向下投票颜色=蓝色；elseif upvotedownvote？red'：（upvote