角度5マテリアル設定ダイナミック（ランダム）カラー

Question

私は、配列から文字列（質問）を表示している軽量カルーセルを持っています。私はバックグラウンド（そして潜在的にフォアグラウンド）の色を動的に変更したい。しかし、私のコードはエラーを引き起こしています...

警告：安全でないスタイルの値の背景を青く塗る（http://g.co/ng/security#xss参照）。

<ngx-carousel style="width:450px" layout="column" layout-align="center center" [inputs]="carouselOne" (carouselLoad)="myfunc($event)" flex> 
    <ngx-item NgxCarouselItem *ngFor="let Question of Questions; let i = index"> 
     <mat-card style="background:{{getColor()}}"> 
     <h1>{{Question}}</h1> 
     </mat-card> 
    </ngx-item> 
    <div layout="row" flex> 
     <button NgxCarouselPrev class='leftRs'>&lt;</button> 
     <button NgxCarouselNext class='rightRs'>&gt;</button> 
    </div> 
    </ngx-carousel> 

Angular 5 Materialオブジェクトに背景色を動的に設定するにはどうすればよいですか？

Answer 1

私はあなたが慎重に見ている場合は、私が学んだ二つのことに気づくでしょう...いくつかのかなりの努力の後

<mat-card [style.background]=myColors[i]> 

これを考え出した：あなたは、あなたが要素に変数の値を割り当てる1）任意の時間をその要素名を角かっこで囲む必要があります2）style = "background：[style.background] =と書かれていますが、そのうちの1つは変数値を扱いますが、もう一方は可変値を扱います。