尝试Angular2教程的主/细节

Question

我一步一步地学习Angular2的官方教程。我总是完全按照它的指示行事，但我无法通过ngFor指令获得英雄列表。所以，这是我的代码：

app.component.ts

import { Component } from '@angular/core';

export class Hero {
  id: number;
  name: string;
};

const HEROES: Hero[] = [
  { id: 11, name: 'Mr. Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'Tour of Heroes';
  hero = HEROES;
};

app.template.ts

<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span>
    {{hero.name}}
  </li>
</ul>

浏览器结果

以下是教程：https://angular.io/docs/ts/latest/tutorial/toh-pt2.html 现在？这有什么问题？只是第一步！谢谢你的帮助。

Answer 1

当你做“让英雄的英雄”英雄是让你和你迭代的变量。但是需要在组件中声明英雄。您引用的数组是否为迭代。这是区分大小写的，所以你没有宣布英雄是真的，你已经宣布了HEROES。

Answer 2

最后我明白了，错误就在这里：

<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="hero.name" placeholder="name">
</div>

在您选择列表中的英雄之前，未声明变量hero.name和hero.id。所以如果你遵循官方教程，请小心，因为他们说它必须起作用，但在你用选择函数完成代码之前不会这样。