Question

我有一个具有count和color属性的组件。该组件应显示count个<div>个数字，其内联样式用于将其颜色更改为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>

现在我有两个问题：

有没有更好的方法在不创建虚拟数组的情况下呈现<div> s count次？
更重要的是，未设置内联样式。如果我对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

关于你的第一个问题：

要创建包含10个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

Angular2组件 - 动态内联样式

2 个答案: