如何在 Angular 2 中将对象传递给 NgStyle 指令？

Question

我正在尝试将 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}"，但似乎不起作用。我收到消息错误：

Error: Uncaught (in promise): Error caused by: Cannot find a differ supporting 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

我做错了什么？

Answer 1

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

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

Answer 2

我对 ngStyle 也有类似的问题，并按如下方式修复：

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

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

添加 .px 使它起作用，而没有它似乎不起作用。

Answer 3

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

这样，您就可以像普通的 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>

如何在 Angular 2 中将对象传递给 NgStyle 指令？

How to pass Object to NgStyle directive in Angular 2?

angular-directive

angular

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