如何动态更改 ngStyle？答案

【问题标题】：How do I change ngStyle dynamically?如何动态更改 ngStyle？
【发布时间】：2019-03-13 22:05:58
【问题描述】：

当某些变量发生变化时，我需要更改多个样式。

我可以使用类似的东西：

[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 的正确方法是什么？

【问题讨论】：

当你用 f12 检查它时，你会看到 style="background: green none repeat scroll 0% 0%;" ng-reflect-ng-style="[object 对象]"。没错

标签： html css angular angular-universal ng-style

【解决方案1】：

使用ngClass 代替ngStyle

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

在css中：

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

【讨论】：

【解决方案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 对象内部：键为类名，值为条件。

【讨论】：

【解决方案3】：

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

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

在控制器中

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

【讨论】：

每分钟可以调用多少时间？我不喜欢模板中的函数，因为有时它开始被称为多次

【解决方案4】：

你可以像这样使用 ngStyle

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

【讨论】：