角度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 =＆＃34; background：也写成[style.background] =，其中一个不会处理变量值，但另一个会处理变量值。