使用Angular 4为html表中的每个行索引设置不同的颜色

Question

I would like to set different colors for selected rows programatically each time when a button outside the table is clicked. I am using the latest version of angular.

I know how to set row color with css but do not know how to influence the css class programatically in typescript.

.ui-table .ui-table-tbody > tr:nth-child(1) {
    background-color: #2DA449; 
}

Is there some way to edit the css class to set the child index and b-color in typescript?

Answer 1

Typescript

export class MyComponent{
    items:any[];
    changeColors(){
    // I'm just selecting the first row for this example but you have to define your own logic 
    this.items[0].color ="#ddd";
    }
}

HTML

<button (click)="changeColors()">Change colors<button/>
<table>
  <tr *ngFor="let item in items;let i=index" [style.color]="item.color">
    ...
  </tr>
</table>

More documention can be found https://angular.io/guide/template-syntax#binding-targets

Answer 2

All you need is ngClass :

<td [ngClass]="{'selected': checkSelected(i)}"> // checkSelected should return boolean

WORKING DEMO