Angular2 Components - Dynamic Inline Styles

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 «s, а также:

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

Binding этот путь к стилю следует избегать, поскольку она не работает во всех версиях 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