动态样式在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'];
}

以下是我得到的输出-

Answer 1

不建议直接绑定到style （并非在所有浏览器上都很好用）。 改用

<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>