Angular2 组件 - 动态内联样式

Question

我有一个具有count 和color 属性的组件。该组件应该显示count 数量的<div>s，并使用内联样式将其颜色更改为color。

这是我目前所拥有的：

@Component({
    selector: 'my-control',
    template: `<div *ngFor="let i of dummyArray" style="color: {{color}}"> COLOR = {{color}}</div>`
})
export class MyControl {
    private _count: number;
    @Input() set count(value: string) {
        this._count = +value;
    }
    @Input() set color(value: string) {
        this._color = value;
    }
    get dummyArray(): number[] {
        let ret: number = [];
        for (let i = 0; i < this._count; ++i) ret.push(i);
        return ret;
    }
    get color(): string {
        return this._color;
    }
}

这呈现：

<my-control count="5" color="red">
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>
    <div>COLOR = red</div>
</my-control>

现在我有两个问题：

1. 有没有更好的方法来渲染<div>s count 次而不创建虚拟数组？

2. 更重要的是，没有设置内联样式。如果我硬编码像style="color: red" 这样的样式，它就可以工作。但是style="color: {{color}}" 没有。如上所示，该元素在没有任何样式的情况下呈现。

对于#2，我也尝试过使用nativeElement 的孩子：

@Input() set count(value: string) {
    this._count = +value;
    this.update();
}
@Input() set color(value: string) {
    this._color = value;
    this.update();
}
update(): void {
    for (let i = 0; i < this._count; ++i) {
        this.renderer.setElementStyle(this.elRef.nativeElement.children[i], 'color', this._color);
    }
}

但我在访问子元素时遇到异常，因为它们显然不存在。

我应该如何解决这些问题？

Answer 1

<div *ngFor="let i of dummyArray" style="color: {{color}}>

在color}} 之后缺少结束"

应避免以这种方式绑定到样式，因为它不适用于所有 Safari 版本（可能还有其他版本）。

改为使用

<div *ngFor="let i of dummyArray" [ngStyle]="{'color': color}">

Answer 2

关于你的第一个问题：

要创建一个包含十个 undefined 元素的数组，您可以这样做：

@Component({
  selector: 'my-app',
  template: `<div *ngFor="let i of arr(10); let index=index">hello {{index}}</div>`
})
export class AppComponent {
  arr=Array;
}

check this plunk