web-dev-qa-db-ja.com

Angular2コンポーネント-動的インラインスタイル

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つの問題を抱えています：

  1. ダミー配列を作成せずに<div>s count回レンダリングするより良い方法はありますか？

  2. さらに重要なことに、インラインスタイルが設定されていません。 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);
    }
}

しかし、子要素は明らかに存在しないため、アクセスすると例外が発生します。

これらの問題を解決するにはどうすればよいですか？

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

"の後のクロージングcolor}}がありません

この方法をスタイルにバインドすることは、すべてのSafariバージョン（おそらく他のバージョン）では機能しないため、避ける必要があります。

代わりに

<div *ngFor="let i of dummyArray" [ngStyle]="{'color': color}">
16
Günter Zöchbauer

最初の質問について：

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

このプランクを確認してください

3
Abdulrahman