count
およびcolor
プロパティを持つコンポーネントがあります。コンポーネントは、色をcount
に変更するために使用されるインラインスタイルでcolor
数の<div>
sを表示することになっています。
ここに私がこれまで持っているものがあります:
@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>
今、私はこれに関して2つの問題を抱えています:
ダミー配列を作成せずに<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);
}
}
しかし、子要素は明らかに存在しないため、アクセスすると例外が発生します。
これらの問題を解決するにはどうすればよいですか?
<div *ngFor="let i of dummyArray" style="color: {{color}}>
"
の後のクロージングcolor}}
がありません
この方法をスタイルにバインドすることは、すべてのSafariバージョン(おそらく他のバージョン)では機能しないため、避ける必要があります。
代わりに
<div *ngFor="let i of dummyArray" [ngStyle]="{'color': color}">
最初の質問について:
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;
}