在 angular 中为按钮动态分配背景颜色和边框颜色

Question

我有一组颜色，

colors = ['red', 'green', 'blue', 'yellow', 'black']

另外，我有一个这样的数组

demo = ['de1', 'de2', 'de3', 'de4', 'de5', 'de6', 'de7', 'de8', 'de9', 'de10', 'de11', 'de12', 'de13', 'de14']

等等，这是动态的，这是我从我正在准备按钮的 API 调用中得到的响应。

我需要以相同的顺序将 colors [] 中的 background-color 和 border-color 分配给 demo [] 中的每个元素。在这方面需要帮助。

TIA

Answer 1

你的数组演示中确实没有元素（你的数组是一个字符串数组）

<!--imagine an array of "items"-->
<div *ngFor="let item of items">
  .....
</div>

然后你可以使用一些像

<div *ngFor="let item of items;let i=index">
  <div [style.color]="colors[i%5]">I'm in color {{colors[i%5]}}</div>
</div>

您也可以使用 ViewChildren

<div *ngFor="let item of items;let i=index">
  <div #dd>I'm in color {{colors[i%5]}}</div>
</div>

在你的.ts

@ViewChildren('dd') items:QueryList<ElementRef>
ngAfterViewInit()
{
   this.items.forEach((x:ElementRef,i:number)=>{
          x.nativeElement.style.color=this.colors[i%5]
   })
}

在 angular 中为按钮动态分配背景颜色和边框颜色

Assigning background-color & border-color to buttons dynamically in angular

html

css

angular

ngfor

ng-class