Recherche de site Web

html - Le tutoriel Angular (tour des héros) n'affiche pas correctement l'alignement de la liste des héros

Je suis en train de suivre le tutoriel Tour of Heroes d'Angular. Malheureusement, lorsque je vais charger la liste des héros, elle s'affiche comme ceci :

Et c'est étrange, parce que la liste n'est pas alignée même si mon css/html/ts du tutoriel semble correct ! J'ai revu plusieurs fois chaque étape et le code indiqué par l'exemple. Ci-dessous le composant complet qui "contrôle" la liste.

heroes.component.ts

import {Component, OnInit} from '@angular/core';
import {Hero} from '../hero';
import {HEROES} from '../mock-heroes';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  selectedHero: Hero;
  heroes = HEROES;

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  constructor() {
  }

  ngOnInit() {
  }

}

heroes.component.css

/* HeroesComponent's private CSS styles */
.selected {
  background-color: #CFD8DC !important;
  color: white;
}
.heroes {
  margin: 0 0 2em 0;
  list-style-type: none;
  padding: 0;
  width: 15em;
}
.heroes li {
  cursor: pointer;
  position: relative;
  left: 0;
  background-color: #EEE;
  margin: .5em;
  padding: .3em 0;
  height: 1.6em;
  border-radius: 4px;
}
.heroes li.selected:hover {
  background-color: #BBD8DC !important;
  color: white;
}
.heroes li:hover {
  color: #607D8B;
  background-color: #DDD;
  left: .1em;
}
.heroes .text {
  position: relative;
  top: -3px;
}
.heroes .badge {
  display: inline-block;
  font-size: small;
  color: white;
  padding: 0.8em 0.7em 0 0.7em;
  background-color: #607D8B;
  line-height: 1em;
  position: relative;
  left: -1px;
  top: -4px;
  height: 1.8em;
  margin-right: .8em;
  border-radius: 4px 0 0 4px;
}

heroes.component.html

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
      [class.selected]="hero === selectedHero"
      (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>

<div *ngIf="selectedHero">

  <h2>{{ selectedHero.name | uppercase }} Details</h2>
  <div><span>id: </span>{{selectedHero.id}}</div>
  <div>
    <label>name:
      <input [(ngModel)]="selectedHero.name" placeholder="name">
    </label>
  </div>

</div>

Réponse n°1

Je pense que j'ai résolu, et comme c'est une erreur un peu subtile, je veux la partager ici.

Lorsque vous créez un nouveau projet Angular depuis le CLI, dans app.component.html vous obtenez :

<div style="text-align:center">
    <h1>
      Welcome to {{ title }}!
    </h1>
    [...]
</div>
[...]

Dans le tutoriel, il est demandé de supprimer le modèle et de le remplacer par <h1>{{title}}</h1>. La partie qui n'est pas claire (du moins pour moi, cela pourrait l'être pour d'autres) est que vous devez remplacer tout le modèle. Si vous supprimez uniquement <h1> et l'autre balise dans le div, vous obtenez

<div style="text-align:center">
    <h1>{{title}}</h1>
</div>

et puis

<div style="text-align:center">
    <h1>{{title}}</h1>
    <app-heroes></app-heroes>
</div>

qui conduit à l'erreur ci-dessus.

La version correcte de app.component.html est simplement :

<h1>{{title}}</h1>
<app-heroes></app-heroes>

Réponse n°2

C'est définitivement la solution, supprimez ce style en ligne (style="text-align:center") et la feuille de style devrait l'aligner parfaitement pour vous.

Articles connexes