我希望我的css类根据条件进行更改。我试图用这个:
<div *ngIf="dropDownBg==='Active'">
<style type="text/css">
.ui-select-toggle{
background: green !important;
}
</style>
</div>
<div *ngIf="dropDownBg==='Suspended'">
<style type="text/css">
.ui-select-toggle{
background: red !important;
}
</style>
</div>
<div *ngIf="dropDownBg==='Disabled'">
<style type="text/css">
.ui-select-toggle{
background: grey !important;
}
</style>
</div>
但这不起作用。默认情况下,浏览器似乎忽略divs
并*ngIf
,只有最后一种样式会覆盖其他样式。以下是浏览器解释:
更新:出现这种情况是因为我使用了ng-select
下拉菜单,内部使用了“我没有选择 - 切换”等级,而我没有任何控制权。所以 WEIRD 人们对这个问题不以为然,请注意这一点。
这是代码:
<div style="min-width: 200px;position: absolute;right: 0">
<ng-select
[items]="items"
(selected)="selected($event)"
[active]="selectedItem"
(removed)="removed($event)"
placeholder="Select a number">
</ng-select>
</div>
答案 0 :(得分:3)
您无法像这样动态更改文档的样式表。相反,为可能的情况定义类并更改切换的类。
尝试这样的事情:
.ui-select-toggle { /* whatever */ }
.ui-select-toggle.suspended { background: red; }
.ui-select-toggle.active { background: green; }
然后更改切换的类:
<div
class="ui-select-toggle"
[class.suspended]="dropDownBg==='Suspended'"
[class.active]="dropDownBg==='Active'"
>
</div>
元素可以有多个CSS类,因此您可以在主类(ui-select-toggle)中定义公共属性,并为辅助类中的每个状态定义特定属性。
答案 1 :(得分:2)
在您的情况下,您必须创建3个样式 并使用指令
[NgClass] = "{style1: condition, style2: condition, style3: condition}
答案 2 :(得分:1)
如果它只有一个属性(这里是背景),你可以这样做:
<div [style.background]="...">...</div>
在您的情况下,可能是:
<div [style.background]="dropDownBg === 'Active' ? 'green' : dropDownBg === 'Suspended' ? : red : dropDownBg === 'Disabled' ? 'grey' : 'black'">...</div>
黑色是你的后备颜色。