Блог

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

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

 <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>
  

Лучший способ изменить цвет в зависимости от условий вы можете использовать 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';
    }
  }
  

Вот демонстрация на stackblitz

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

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

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