Пол отображается для таблицы и цвет шрифта в зависимости от возраста для таблицы

Question

Мне нужен мой стол, чтобы перечислить пол героев как "M" или "F" в таблице, основываясь на поле героев, будь то мужчина или женщина. Так что, если его мужской он будет отображаться только как «М». Кроме того, мне нужно, чтобы шрифты были определенного цвета в зависимости от возраста. Например, если 0 < age <= 20 font 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

Я добавил рабочий код stackblitz по следующей ссылке https://stackblitz.com/edit/angular-fhkxir?file=src%2Fapp%2Fapp.component.ts. И я думаю, что это будет полезно для вас

Answer 2

Чтобы изменить цвет в зависимости от условия , необходимо использовать директиву 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';
    }
  }

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

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

Answer 3

Используется для изменения цвета

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

Используйте , чтобы видеть только M/F:

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

См. Рабочий код

Answer 4

Просто добавьте еще одну <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, а затем сделайте то, что вам нужно, с вариантом Женский.

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