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

Question

我正在做 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() {
  }

}

英雄.组件.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 创建一个新的 Angular 元素时，您将在 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>