Elementy Angular2 - dynamiczne style śródliniowe

Question

Mam komponent o właściwości count i color. Element ma wyświetlać numer count o numerze <div> s z wbudowanym stylem używanym do zmiany koloru na color.

Oto co mam do tej pory:

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

Czyni:

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

Teraz mam dwa problemy z tym:

1. Czy istnieje lepszy sposób na renderowanie the <div> s count razy bez tworzenia fałszywej tablicy?

2. Co ważniejsze, style śródliniowe nie są ustawiane. Jeśli używam kodów typu hardcode, takich jak style="color: red", to działa. Ale style="color: {{color}}" nie. Element jest renderowany bez żadnych stylów, jak widać powyżej.

Dla # 2, Próbowałem również za pomocą dzieciom nativeElement „s, a także:

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

Ale otrzymuję wyjątek dostępu do elementów podrzędnych, gdyż nie istnieje widocznie.

W jaki sposób należy rozwiązać te problemy?

Answer 1

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

brakuje zamykanie " po color}}

ten sposób do stylu należy unikać, ponieważ nie działa we wszystkich wersjach Safari (być może również innych) Binding.

Zamiast używać

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

Answer 2

O swoim pierwszym pytaniu:

utworzyć tablicę z dziesięcioma undefined elementów, można zrobić:

@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