如何在 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}" ，但它似乎不起作用。 我收到消息錯誤：

錯誤：未捕獲（承諾）：由以下原因引起的錯誤：找不到不同的支持對象 '{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>