Angular2: Невозможно прочитать имя свойства «неопределенного»

Я начинаю изучать Angular2. Я слежу за учебником Heroes, представленным на 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

 

{{title}}

My Heroes

  • {{hero.id}} {{hero.name}}

{{hero.name}} details!

{{hero.id}}

Вот фото:

введите описание изображения здесь

    Выбранная переменнаяHero имеет значение null в шаблоне, поэтому вы не можете привязать выбранноеHero.name как есть. Вам нужно использовать оператор elvis для этого случая:

      

    Разделение [(ngModel)] в [ngModel] и (ngModelChange) также необходимо, потому что вы не можете назначить выражение, использующее оператор elvis.

    Я также думаю, что вы хотите использовать:

     

    {{selectedHero?.name}} details!

    вместо:

     

    {{hero.name}} details!

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

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

     

    {{selectedHero.name}} details!

    {{selectedHero.id}}

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

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

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

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

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

    за которым следует этот кодовый блок:

     

    My Heroes

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

     

    {{hero.name}} details!

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

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

    Шаблон для отображения героев должен выглядеть следующим образом:

     

    My Heroes

    • {{hero.id}} {{hero.name}}

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

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

    Эта строка

     

    {{hero.name}} details!

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

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

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

     export class AppComponent { title = 'Tour of Heroes'; heroes = HEROES; selectedHero:Hero = new Hero(); onSelect(hero: Hero):void{ this.selectedHero = hero; } } 
    Давайте будем гением компьютера.