Question

当某些变量更改时，我需要更改多种样式。

我可以使用类似的东西：

[style.left]="isMenuShown ? '0px' : '-100vw'"

它工作正常，但我希望更改乘法样式。

然后我尝试使用ngStyle example：

<div [ngStyle]="styleList">...</div>

在控制器中类似：

if (this.isDefaultStyle) {
    this.styleList = {'background' : 'green'};
  } else {
    this.styleList = {'background' : 'red'};
  }

似乎可行，但是当我用f12检查时，看到

ng-reflect-ng-style =“ [对象对象]”

因此，问题是：这是否意味着它无法正常工作？如果是的话，我动态更改ngStyle的正确方法是什么？

Answer 1

使用ngClass代替ngStyle

<div [ngClass]="{isMenuShown ? 'show' : 'hide'}">...</div>

在CSS中：

.show{multi style when show menu}
.hide{multi style when hide menu}

Answer 2

使用 ngClass 代替 ngStyle ，因为您需要更改多种样式。

这里是一个例子：

    <some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

    <some-element [ngClass]="{'class1': var1===1, 'class2': var1===2, 'class3': var1===3}">...</some-element>

    <some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

说明：

内部ngClass对象：键是类名，值是条件。

Answer 3

您可以使用函数来完成动态变化。

<div [ngStyle]="getStyleList()">...</div>

在控制器中

function getStyleList(){
 if (this.isDefaultStyle) {
       return {'background' : 'green'};
  } else {
      return {'background' : 'red'};
  }
}

Answer 4

您可以像这样使用ngStyle

<div [ngStyle]="{'background' : isDefaultStyle ? 'green' : 'red'}">...</div>

如何动态更改ngStyle？

4 个答案: