Componenti Angular2 - Stili lineari dinamici

Question

Ho un componente che ha una proprietà count e color. Il componente dovrebbe visualizzare il numero di <div> s con uno stile in linea utilizzato per cambiare il colore in color.

Ecco quello che ho finora:

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

Ciò rende:

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

Ora ho due problemi con questo:

1. C'è un modo migliore per rendere il <div> s count s senza creare un array fittizio?

2. Ancora più importante, gli stili in linea non vengono impostati. Se ho stili hardcode come style="color: red", funziona. Ma lo style="color: {{color}}" no. L'elemento è reso senza stili come puoi vedere sopra.

Per 2 #, ho anche provato ad utilizzare i bambini 's la nativeElement così:

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

Ma io ottenere un'eccezione accesso gli elementi figlio in quanto non esistono a quanto pare.

Come devo risolvere questi problemi?

Answer 1

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

manca la chiusura " dopo color}}

Binding questo modo di stile dovrebbe essere evitato perché non funziona in tutte le versioni di Safari (forse anche altri).

Invece utilizzare

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

Answer 2

Chi tua prima domanda:

per creare un array con dieci undefined elementi, si potrebbe fare:

@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