表和字体颜色的性别显示-按年龄分列

Question

我需要我的表格列出性别的英雄作为"M"或"F"在表中根据性别的英雄，无论是男性还是女性。因此，如果它的雄性，它只会显示为"M“。此外，我需要的字体是特定的颜色，根据年龄。例如，如果0 < age <= 20字体color #000000(black)。如果是20 < age <= 50 = font color #85929E

我不知道如何将hero.gender数据绑定到表中以显示M或F&并将字体颜色绑定到年龄。

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

  </table>

模拟英雄：

export const HEROES: Hero[] = [
  { id: 11, name: 'Mr.Incredible', gender: 'Male', superpowers: 'Super Strength', age: 10  },
  { id: 12, name: 'Missappear', gender: 'Female', superpowers: 'Invisibility', age: 29  },
  { id: 13, name: 'Jetstream', gender: 'Female', superpowers: 'Flying', age: 32 },
  { id: 14, name: 'Nightcrawler', gender: 'Male', superpowers: 'Shapeshifting', age: 17 },
  { id: 15, name: 'Flash', gender: 'Female', superpowers: 'Super Speed', age: 23 },
  { id: 16, name: 'Professor X', gender: 'Male', superpowers: 'Telepathy', age: 38 },
  { id: 17, name: 'Jean Grey', gender: 'Female', superpowers: 'Telekinesis', age: 35 },
  { id: 18, name: 'Wolverine', gender: 'Male', superpowers: 'Regeneration', age: 24 },
];

Answer 1

要根据条件更改颜色，需要使用ngStyle指令，如下所示

component.html

    <tr *ngFor="let hero of heroes" [ngStyle]="{'background-color':getColor(hero.superpowers)}">

        <td><span class="badge">{{hero.id}}</span></td>
    <td><span class="badge">{{hero.name}}</span></td>
    <td><span class="badge">{{hero.gender == 'Male' ? 'M': 'F'}}</span></td>
    <td [ngStyle]="{ 'color' : getColorByAge(hero.age) }"> <span class="badge"  >{{hero.age}}</span></td>
    <td><span class="badge">{{hero.superpowers}}</span></td>
    <td><button class="delete" title="delete hero">X</button></td>

  </tr>

component.ts

  getColorByAge(age) {

    switch (true) {
      case age > 0 && age <= 20:
        return '#000000';
      case age > 20 && age <= 50:
        return '#85929E';
    }
  }

这里是stackblitz的解决方案。

Answer 2

只需在表中添加另一个<td>，如下所示：

<td><span class="badge" *ngIf="hero.gender === 'Male'">
<span [ngClass]="{'black-text' : hero.age <= 20}">M</span>
<span [ngClass]="{'other-text' :  hero.age > 20 && hero.age <= 50}">M</span>
</span></td>

刚创建了css类，然后用女性变量做你需要做的事情。

上面只是我在这里写的一个例子，可能不会真正编译成功。

Answer 3

用于改变颜色

[style.color]="hero.age <= 20 ? '#000000': hero.age <= 50 ? '#85929E' : 'green'"

使用只查看

{{hero.gender.charAt(0)}}

这里是代码

  <td><span class="badge" [style.color]="hero.age <= 20 ? '#000000': hero.age <= 50 ? '#85929E' : 'green'">{{hero.gender.charAt(0)}}</span></td>

见工作代码