Html 不同条件下的ngclass

我有一个div class=row，我想根据一些变量情况制作一些css样式

我就是这样做的

    <div class="row"
[ngClass]="{
  'case1': displayUseShortWarning === true,
  'case2': displayUseShortWarning === true && displaySellInCalifornia === true,
  'case3': displayNoWarningOnProduct === false          
}"
</div>


.case1{
    position: absolute;
    top: 0;
}

.case2{
    position: absolute;
    top: 55px;
}
.case3{
    position: absolute;
    top: 35px;
}

我的问题是如何用不同的代码做相同的事情？

---

我不喜欢ngClass中有很多代码这一事实，另一个选择是使用自定义指令，该指令通过使用Render2应用和删除css类

ts文件

html

我希望你能明白。您也可以应用自己的逻辑删除类。

我觉得没有那么长。 老实说，你最好保持这种状态。 使用函数将在每个周期触发它。 使用布尔值仅在值更改时触发

这就是我要做的

<div class="row case" [ngClass]="{
  'case1': displayUseShortWarning,
  'case2': displayUseShortWarning && displaySellInCalifornia,
  'case3': !displayNoWarningOnProduct          
}">
</div>

.case {
    position: absolute;
}

.case1 {
    top: 0;
}

.case2 {
    top: 55px;
}

.case3 {
    top: 35px;
}

---

分别有3个类和3个不相关的条件。它似乎没有变得比这短。投票结束，因为人们正在接受你的陈述。我不喜欢这样一个事实，即我在ngClass中有很多代码，只是将其转移到另一个位置，这不符合任何实际目的。@AnuragSrivastava我想他想把这个逻辑从模板中移走。

<div class="row"
[ngClass]="displayClass">
</div>

<button (click)="onSomeConditionSetting()">Change Class</button>

<div class="row case" [ngClass]="{
  'case1': displayUseShortWarning,
  'case2': displayUseShortWarning && displaySellInCalifornia,
  'case3': !displayNoWarningOnProduct          
}">
</div>

.case {
    position: absolute;
}

.case1 {
    top: 0;
}

.case2 {
    top: 55px;
}

.case3 {
    top: 35px;
}