1
votes

Sexe affiché pour le tableau et la couleur de la police en fonction de l'âge du tableau

J'ai besoin que mon tableau répertorie les sexes des héros sous la forme "M" ou "F" dans le tableau en fonction du sexe des héros, qu'il soit masculin ou femme. Donc, s'il s'agit d'un mâle, il n'apparaîtra que par "M". De plus, j'ai besoin que les polices soient d'une couleur spécifique en fonction des âges. Par exemple, si 0 font color # 000000 (noir) . si 20

Je ne sais pas comment lier les données hero.gender au tableau pour afficher M ou F & et liez les couleurs de police à l'âge.

 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 },
];
  Mock-heroes: 
   <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>

angular html css

1 commentaires

J'ai ajouté une solution sur stackblitz, veuillez consulter stackblitz.com/edit/…

3 Réponses :

1
votes

Ajoutez simplement un autre dans le tableau avec quelque chose comme ce qui suit:

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

  Vous venez de créer les classes css, puis faites ce dont vous avez besoin avec la variante féminine. 
  Ci-dessus est juste un exemple que j'ai écrit ici et qui pourrait ne pas être compilé avec succès.

0 commentaires

1
votes

Pour changer la couleur en fonction de la condition , vous devez utiliser la directive ngStyle comme ci-dessous

component.html

  getColorByAge(age) {

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

component.ts

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

Voici la solution sur stackblitz

0 commentaires

1
votes

Utiliser pour changer la couleur

[style.color] = "hero.age

Utilisez pour afficher uniquement M/F :

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

Voici le code

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

Voir le code de travail

0 commentaires