Angular2 Komponenten - Dynamische Inline-Stile

Question

Ich habe eine Komponente, die eine count und eine color Eigenschaft hat. Die Komponente soll count Nummer <div> s mit einem Inline-Stil anzeigen, der verwendet wird, um seine Farbe in zu ändern.

Hier ist, was ich bisher habe:

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

Dies macht:

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

Jetzt habe ich zwei Probleme mit diesem:

1. Gibt es eine bessere Art und Weise zu machen, die <div> s count mal ohne ein Dummy-Array zu erstellen?

2. Noch wichtiger ist, dass die Inline-Stile nicht festgelegt werden. Wenn ich Stile wie style="color: red" fest codiere, funktioniert es. Aber style="color: {{color}}" nicht. Das Element wird ohne Stile wiedergegeben, wie Sie oben sehen können.

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

   Aber ich bekomme Ausnahme der untergeordneten Elemente zugreifen, da sie scheinbar nicht vorhanden ist:

Für # 2, ich habe auch die nativeElement ‚s Kinder auch versucht, mit.

Wie soll ich diese Probleme lösen?

Answer 1

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

fehlt die Schließung " nach color}}

Bindung auf diese Weise Stil sollte vermieden werden, weil es nicht in allen Safari-Versionen (vielleicht auch andere) funktioniert.

Stattdessen verwenden

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

Answer 2

Über Ihre erste Frage:

mit zehn undefined Elemente eines Arrays zu erstellen, könnten Sie tun:

@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