html - Angular 教程(英雄之旅)未在英雄列表上显示正确的对齐方式

我在做安格尔的英雄之旅教程。不幸的是，当我要加载英雄列表时，它显示如下：

这很奇怪，因为即使教程中的css/html/ts看起来正确，列表也没有对齐！我已经看到更多的每一个步骤和代码报告的例子。在“控制”列表的完整组件下面。
英雄.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() {
  }

}

英雄.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;
}

英雄.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>

最佳答案

我想我已经解决了，因为这是一个微妙的错误，我想在这里分享。
从cli创建新的角度项目时，在app.component.html中可以获得：

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

在教程中，它要求删除模板并用<h1>{{title}}</h1>替换。不清楚的部分（至少对我来说，可能是其他人）是你必须替换所有的模板。如果只删除<h1>和div中的另一个标记，则获得

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

然后

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

这导致了上面的错误。
app.component.html的正确版本是：

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

关于html - Angular 教程(英雄之旅)未在英雄列表上显示正确的对齐方式，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48853299/