Angular2：无法读取未定义的属性“name”

Question

Angular2：无法读取未定义的属性“name”

我开始学习Angular2。我一直在关注angular.io提供的英雄教程。一切正常，直到被使用模板的HTML杂乱所困扰，我在其位置使用模板URL，并将HTML移动到名为hero.html的文件。生成的错误是“无法读取未定义的属性'名称”。奇怪的是，可以访问指向对象数组的英雄变量，以便ngFor将根据数组中的对象数量生成正确数量的“li”标记。但是，无法访问阵列对象的数据。此外，即使是包含一些文本的简单变量，也不会在HTML中使用{{}}括号显示（请参阅提供的代码）。

app.component.ts

import { Component } from '@angular/core';@Component({
  selector: 'my-app',
  templateUrl: './hero.html',
  styleUrls:['./styles.css']})export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero:Hero;
  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }}export class Hero{
   id: number;
   name: string;}const HEROES: Hero[] = [
   { id: 1, name: 'Mr. Nice' },
   { id: 2, name: 'Narco' },
   { id: 3, name: 'Bombasto' },
   { id: 4, name: 'Celeritas' },
   { id: 5, name: 'Magneta' },
   { id: 6, name: 'RubberMan' },
   { id: 7, name: 'Dynama' },
   { id: 8, name: 'Dr IQ' },
   { id: 9, name: 'Magma' },
   { id: 10, name: 'Tornado' }];

hero.html

<h1>{{title}}</h1><h2>My Heroes</h2><ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li></ul><h2>{{hero.name}} details!</h2><div>
    <label>id: </label>{{hero.id}}</div><div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"><div>