角度教程（英雄之旅）并没有显示英雄的正确对齐方式。名单

Question

我正在进行Angular的英雄之旅教程。不幸的是，当我要加载英雄列表时，它显示如下：

这很奇怪，因为即使我的教程中的css / html / ts看起来正确，列表也没有对齐！我已经看过每一步的更多次和示例报告的代码。在＆＃34;控制＆＃34;的完整组件下方清单。

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>

Answer 1

我想我已经解决了，因为这是一个有点微妙的错误，我想在这里分享。

当您从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>

Answer 2

这绝对是解决方案，删除该内联样式（style="text-align:center"），样式表应使其完全适合您。