動的なスタイリングがAngular2で機能しない

Question

以下は私の作業コードです。これは、コンソールでエラーを表示せず、配列アイテムとテスト見出しを期待どおりに出力しません。しかし、どういうわけか、ダイナミックな背景スタイリングが働いていない、私がここで間違っていることを教えてください。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <h1>{{name}}</h1> 
     <div class="one" *ngFor="let item of colArr" style="background: {{item}};">{{item}}</div> 
    `, 
    styles: [` 
     .one { 
      width: 100%; 
      text-align: center; 
      padding: 10px; 
      margin: 5px; 
     } 
    `] 
}) 

export class HomeComponent { 
    public name = 'test'; 
    public colArr = ['#111111', '#222222', '#333333', '#444444', '#555555', '#666666', '#777777', '#888888', '#999999']; 
} 

後、私は取得しています出力される - styleに直接結合

Answer 1

は（すべてのブラウザでうまく動作しません）推奨されません。答えを代わりに

<div class="one" *ngFor="let item of colArr" [ngStyle]="{background: item}">{{item}}</div> 

または

<div class="one" *ngFor="let item of colArr" [style.background]="item">{{item}}</div>