Angular 2 weird template scope поведение

Question

Только что прошел через Tour of Heroes tutorial app и испытал некоторое интересное поведение в моем шаблоне. Я начал вторую часть учебника с помощью следующего кода:

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

@Component({ 
    selector: 'my-app', 
    template:` 
    <h1>{{title}}</h1> 
    <h2>{{hero.name}} details!</h2> 
    <div><label>id: </label>{{hero.id}}</div> 
    <div> 
     <label>name: </label> 
     <div><input [(ng-model)]="hero.name" placeholder="name"></div> 
    </div> 
    `, 
    directives: [FORM_DIRECTIVES] 
}) 

class AppComponent { 
    public title = 'Tour of Heroes'; 
    public hero: Hero = { 
    id: 1, 
    name: 'Windstorm' 
    }; 
} 

Когда проинструктированы, чтобы добавить множество новых героев (var HEROES: Hero[] = [ /* Hero Data */];) и новое свойство моего компонента, я предположил, что мы заменяли оригинальный hero собственности и в конечном итоге с этим:

class AppComponent { 
    public title = 'Tour of Heroes'; 
    public heroes = HEROES; 
} 

Затем шаблон был изменен следующим образом:

<h1>{{title}}</h1> 
<ul class="heroes"> 
    <li *ng-for="#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> 
    <div><input [(ng-model)]="hero.name" placeholder="name"></div> 
</div> 

В браузере, т он неупорядоченный список затем отобрал один li за hero в массиве, но не распечатал name или id. Псих. После некоторого мастерства я понял, что если я добавлю исходное свойство hero обратно в класс AppComponent, все герои в массиве будут отображаться просто отлично. Кроме того, если я просто удалил любой код шаблона, ссылающийся на hero свойство не в цикле ng-for, список также будет отображаться просто отлично.

Вот что я ожидал:

1. В моей оригинальной версии, все герои в массиве должны быть отражены в неупорядоченном списке, но затем все значения героя вне цикла должен быть undefined или, возможно, последний элемент в списке.

2. Когда я добавил свойство оригинального героя, должно возникнуть какое-то название столкновения или какой-либо другой побочный эффект.

Как это работает так, как оно делает?

Edit: Вот запрашиваемая plunker: http://plnkr.co/edit/U3bSCaIOOjFdtw9XxvdR?p=preview

Answer 1

ИТАК с plunker я получил немного больше того, что вы пытаетесь сделать, и вопросы вы имеете.

Мой рабочий шлепнуть с более подробной HERE

1. NG-For

Когда вы делаете NG-цикл переменная "#" изолируется быть внутри только петли. Я переименовал его в «domhero», чтобы вы могли видеть.

У вас было несколько обращений к нему за пределами объекта li, который бы не работал. Я переписал его немного, чтобы поместить все ваши заголовки и прочее в цикл LI.

2. Переменные объекта

На входе вы пытаетесь получить доступ к переменной внутри нг-за цикл, который вы не можете сделать. Как только вы закончите цикл, вы не сможете получить доступ к этим переменным. Поэтому я показал, к чему я привязывался, чтобы сделать его более понятным для вас.

Я думаю, что это запуталось, когда у вас было так много вещей, названных одинаково повсюду (герой, герои, герой, класс: герой), если вы посмотрите на плункер, который я сделал, я переименовал переменные, чтобы помочь отметьте, откуда они идут.

Надеюсь, это поможет!

p