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

Posted 2023-02-22

【中文标题】如何在 Angular 2 中将对象传递给 NgStyle 指令？

【英文标题】：How to pass Object to NgStyle directive in Angular 2?

【发布时间】：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

我做错了什么？

【问题讨论】：

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

【参考方案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 使它工作，而没有它，它似乎没有。