如何动态更改 ngStyle？

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="[object Object]"

因此问题是：这是否意味着它没有正常工作？如果是，我动态更改 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 因为您需要更改多个样式。

Here is an example:

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

Description:

在 ngClass 对象内部：键是 class 名称，值是条件。

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？

How do I change ngStyle dynamically?

html

css

ng-style

angular-universal

angular