【问题标题】：How to pass Object to NgStyle directive in Angular 2?如何在 Angular 2 中将对象传递给 NgStyle 指令？
【发布时间】：2017-03-23 17:11:22
【问题描述】：

我正在尝试将NgStyle 指令与这样的对象变量一起使用：

@Component({
      template: `
            <div [ngStyle]="object">
              some test text
           </div>`
    })

export class example {
    private object: string = "{background-color: 'white'}";
}

我也尝试了object = "background-color: 'red'" 和[ngStyle]="{object}"，但它似乎不起作用。我收到消息错误：

错误：未捕获（承诺中）：错误导致：找不到不同的支持对象 '{color: 'white'}'(...)consoleError @ VM1051 zone.js@0.6.21?main=browser:346_loop_1 @ VM1051 zone.js@0.6.21?main=browser:371drainMicroTaskQueue @ VM1051 zone.js@0.6.21?main=browser:375ZoneTask.invoke @ VM1051 zone.js@0.6.21?main=browser:297

我做错了什么？

【问题讨论】：

“作为一个对象，就像这样”但是你传递了一个字符串。

标签： angular angular-directive

【解决方案1】：

您也可以使用 CSS-in-JS 对象语法

这样，你可以直接传递camelCased，而不是用引号包围属性字符串，就像一个普通的JS对象?

<div [ngStyle]="{backgroundColor: 'red', borderRadius: '10px', width: '100px' }">

</div>

为了有一个更干净的模板，你总是可以在 TS 文件中定义你的样式对象...

=> .ts

export class MyComponent  {
 
   // ...
  
   stylesObj = {backgroundColor: 'red', borderRadius: '10px', width: '100px' }
}

=> .html

<div [ngStyle]="stylesObj">

</div>

【讨论】：

【解决方案2】：

不要将string 传递给[ngStyle]，传递Object 即可：

private object: Object = { 'background-color': 'red'};

【讨论】：

模板绑定属性应该是公开的

【解决方案3】：

我在 ngStyle 上遇到了类似的问题，并修复如下：

[ngStyle]="{'top.px':dtPickerTop, 'left.px':dtPickerLeft}"

dtPickerTop 和 dtPickerLeft 是根据点击事件在我的组件中设置的。

添加.px 使它工作，而没有它，它似乎没有。

【讨论】：