Làm thế nào để vượt qua Object để NgStyle chỉ thị trong Angular 2?

Question

Tôi đang cố gắng sử dụng NgStyle chỉ với một biến đối tượng như vậy:

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

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

Tôi cũng đã cố gắng với object = "background-color: 'red'" và [ngStyle]="{object}", nhưng nó có vẻ như nó không hoạt động. Tôi nhận được thông báo lỗi:

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

Tôi đang làm gì sai?

Answer 1

Đừng vượt qua một string-[ngStyle], vượt qua một Object và nó sẽ làm việc:

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

Answer 2

Tôi đã có một vấn đề tương tự với ngStyle, và cố định nó như sau:

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

dtPickerTop & dtPickerLeft được đặt trong thành phần của tôi dựa trên sự kiện nhấp chuột.

Thêm .px làm cho nó hoạt động, trong khi không có nó, dường như không có.