在Angular 2中如何将Object传递给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}"，但似乎不起作用。我得到消息错误:

错误:Uncaught (in promise):由于:无法找到不同的支持对象'{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?主要=浏览器:297

我做错了什么?

Answer 1

不传递string给[ngStyle]，传递Object，它将工作:

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

Answer 2

我在ngStyle中遇到了类似的问题，并按如下方式修复了它:

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

dtPickerTop,dtPickerLeft是基于click事件在我的组件中设置的。

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

Answer 3

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

这样，你就不用在属性字符串周围加上引号了，你只需要传递camelcase，就像一个普通的JS对象😋

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

为了有一个更干净的模板，你可以在TS文件中定义你的styles对象…

=比;.ts

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

=比;. html

<div [ngStyle]="stylesObj">
</div>