Angular 5 Material 设置动态（随机）颜色

Question

我有一个轻型旋转木马，它显示数组中的字符串（问题）。我想动态更改背景（可能还有前景）颜色。但是，我的代码导致错误...

警告：正在清理不安全的样式值 background:blue（参见 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]= ，其中一个不会处理变量值，但另一个会。

Angular 5 Material 设置动态（随机）颜色

Angular 5 Material setting dynamic (random) colors

colors

dynamic

angular-material

angular5