Я начинаю изучать Angular2. Я следовал Учебному пособию для Героев, предоставленному angular.io. Все работало нормально, пока, будучи раздраженным беспорядком HTML, использующим шаблон, я использовал URL-адрес шаблона и переместил HTML-файл в файл hero.html. Сгенерированная ошибка: «Не удается прочитать свойство« имя »из неопределенного». Странно, что переменная heroes, которая указывает на массив объектов, может быть доступна, так что 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>

Вот фото: