Добавление определенных цветов к строкам таблицы на основе различных суперспособностей героев

Question

Я хочу убедиться, что строки таблицы имеют цвета, основанные на сверхдержаве героя. Например, если у героя есть супер сила, его цвет строки будет цвет: красный, если цвет строки Летающий будет цвет: синий

Я не могу связать данные вместе и создать цвета строк, основанные на сверхдержаве героя.

<table>
  <tr>
    <th>Hero ID</th>
    <th>Hero Name</th>
    <th>Gender</th>
    <th>Age</th>
    <th>Superpower</th>
    <th>Delete</th>
  </tr>
  <tr *ngFor="let hero of heroes">
    <a routerLink="/detail/{{hero.id}}">
      <td><span class="badge">{{hero.id}}</span></td>
      <td><span class="badge">{{hero.name}}</span></td>
      <td><span class="badge">{{hero.gender}}</span></td>
      <td><span class="badge">{{hero.age}}</span></td>
      <td><span class="badge">{{hero.superpowers}}</span></td>
    </a>
    <td><button class="delete" title="delete hero" (click)="delete(hero)">X</button></td>
  </tr> 
</table>

Answer 1

Лучший способ изменить цвет в зависимости от условий . Вы можете использовать директиву ngStyle, как показано ниже.

component.html

<tr *ngFor="let hero of heroes" [ngStyle]="{'background-color':getColor(hero.superpowers)}" >
              <a routerLink="/detail/{{hero.id}}">
    <td><span class="badge">{{hero.id}}</span></td>
    <td><span class="badge">{{hero.name}}</span></td>
    <td><span class="badge">{{hero.gender}}</span></td>
    <td><span class="badge">{{hero.age}}</span></td>
    <td><span class="badge">{{hero.superpowers}}</span></td>
  </a>
    <td><button class="delete" title="delete hero"
        (click)="delete(hero)">X</button></td>

      </tr>

component.ts

  getColor(superpower) {
    console.log(superpower);
    switch (superpower) {
      case 'strength':
        return 'red';
      case 'FLying':
        return 'blue';
    }
  }

Вот демонстрация стека бликов

Надеюсь, это поможет!

Answer 2

Вы можете использовать ngStyle, как показано ниже

<tr *ngFor="let hero of heroes" 
[ngStyle]="{'background-color': hero.superpowers == 'flying'? 'blue': 'red' }">