html - Endre Css fra arrayverdi

Jeg vet at i Angular kan du dynamisk legge til en klasse på elementet, men hvordan endrer jeg verdien til en egenskap? Jeg vil at hver knapp skal være neste spotColour i arrayen. Jeg føler at eksemplet mitt forklarer det godt:

<button style="background-color: arrThemes[0]['spotColour']"></button>
<button style="background-color: arrThemes[1]['spotColour']"></button>
<button style="background-color: arrThemes[2]['spotColour']"></button>

arrThemes = [
  {spotColour : 'rgb(238, 68, 136)', baseColour : 'rgb(80, 54, 78)'},
  {spotColour : 'rgb(179, 165, 136)', baseColour : 'rgb(88, 67, 59)'},
  {spotColour : 'rgb(87, 167, 82)', baseColour : 'rgb(47, 68, 46)'},
];

Svar #1

Prøv noe som dette uttrykket med

<button style="{{ 'background-color: ' + arrThemes[0]['spotColour'] }}"></button>

eller på en mer sivilisert måte ved å bruke NgStyle

<button [ngStyle]="{'background-color': arrThemes[0]['spotColour']}"></button>

Svar #2

bruk ngStyle-taggen for å legge til stiler dynamisk

<button *ngFor="let item of arrThemes " [ngStyle]="{'background-color': item.spotColour }"></button>

Relaterte artikler