Angular 教程（英雄之旅）没有在英雄列表中显示正确的对齐方式答案

【问题标题】：Angular tutorial (tour of heroes) doesn't displays correct alignment on heroes' listAngular 教程（英雄之旅）没有在英雄列表中显示正确的对齐方式
【发布时间】：2018-07-28 22:17:13
【问题描述】：

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

这很奇怪，因为即使教程中的 css/html/ts 看起来正确，列表也没有对齐！我已经多次看到每个步骤以及示例报告的代码。在“控制”列表的完整组件下方。

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>

【问题讨论】：

标签： html css angular typescript

【解决方案1】：

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

当你从 cli 创建一个新的 Angular 项目时，你会在 app.component.html 中获得：

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

从教程中它要求删除模板并替换为<h1>{{title}}</h1>。不清楚的部分（至少对我而言，可能对其他人而言）是您必须替换 all 模板。如果只删除<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>

【讨论】：

【解决方案2】：

这绝对是解决方案，删除该内联样式 (style="text-align:center") 并且样式表应该会为您完美对齐。

【讨论】：