не может прочитать свойство неопределенного углового6 [дубликат]

Это позволяет избежать инициализации выбранного элементаHero вашего компонента пустым объектом (вместо того, чтобы оставить его неопределенным).

В вашем примере кода это даст следующее:

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero:Hero = new Hero();

  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }
}

Эта строка

<h2>{{hero.name}} details!</h2>

находится вне *ngFor, и нет hero, поэтому hero.name не работает.

Вы получили эту ошибку, потому что следовали плохо написанным указаниям в учебнике Heroes. Я столкнулся с тем же.

В частности, под заголовком Отображать имена героев в шаблоне , он указывает:

Чтобы отобразить героя имена в неупорядоченном списке, вставьте следующий фрагмент HTML под заголовком и над деталями героя.

, за которым следует этот код:

<h2>My Heroes</h2>
<ul class="heroes">
  <li>
    <!-- each hero goes here -->
  </li>
</ul>

Он делает не инструктируйте вас заменить предыдущий детальный код, и он должен. Вот почему мы остались с:

<h2>{{hero.name}} details!</h2>

вне нашего *ngFor.

Однако, если вы прокрутите страницу вниз, вы увидите следующее:

Шаблон для отображения героев должен выглядеть так:

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

Обратите внимание на отсутствие элементов детализации из предыдущих попыток.

Ошибка, подобная этой автору, может привести к довольно дикой гусиной погоне. Надеюсь, этот пост помогает другим избежать этого.

Вам просто нужно было прочитать немного дальше, и вы бы познакомились с структурной директивой * ngIf.

selectedHero.name еще не существует, поскольку пользователю еще предстоит выбрать героя, чтобы он возвращает undefined.

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

Директива * ngIf сохраняет selectedHero от DOM до тех пор, пока она не будет выбрана и, следовательно, станет правдой.

Этот документ помог мне понять структурные директивы.