3

我希望我的 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的下拉菜单在内部使用了我无法控制的类“ui-select-toggle”。所以奇怪的人对这个问题投了反对票，请注意这一点。

这是代码：

<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>
4

3 回答 3

7

您不能像这样动态更改文档的样式表。相反，为可能的情况定义类并更改切换的类。

尝试这样的事情：

.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) 中定义公共属性，并在辅助类中为每个状态定义额外的属性。

于 2017-06-28T12:30:38.903 回答
2

在您的情况下，您必须创建 3 种样式并使用指令

[NgClass] = "{style1: condition, style2: condition, style3: condition}
于 2017-06-28T12:32:24.017 回答
1

如果它只有一个属性（这里是背景），你可以这样做：

<div [style.background]="...">...</div>

在你的情况下，它可能是：

<div [style.background]="dropDownBg === 'Active' ? 'green' : dropDownBg === 'Suspended' ? : red : dropDownBg === 'Disabled' ? 'grey' : 'black'">...</div>

黑色是你的后备颜色。

于 2017-06-28T13:51:41.503 回答