html - 根据不同的英雄超能力为表格的行添加特定的颜色

Question

我想确保表格的行具有基于英雄 super 大国的颜色。例如，如果英雄有超强的力量，它的行颜色就是颜色:红色，如果是FLying，它的行颜色就是颜色:蓝色

我无法将数据绑定(bind)在一起并根据英雄超能力创建行颜色。

<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';
    }
  }

Here is a demo on stackblitz

希望这会有所帮助!