Angular 2 Master/Detail nead的解释

Question

我是Angular 2的新手，这是官方网站的代码。我理解所有的类，导入，列表，HTML标签。但我不明白选择（英雄）metod。 * ngFor直播列表ID和名称。如果我们选择列表，则会显示详细信息。该方法如何工作？它抓住了数据，但以什么方式对我不明确。

import { Component } from '@angular/core'; 

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

const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' }, 
    { id: 15, name: 'Magneta' }, 
    { id: 16, name: 'RubberMan' }, 
    { id: 17, name: 'Dynama' }, 
    { id: 18, name: 'Dr IQ' }, 
    { id: 19, name: 'Magma' }, 
    { id: 20, name: 'Tornado' } 
]; 

@Component({ 



selector: 'my-app', 

template:'

<h1>{{title}}</h1> 
<h2>My Heroes</h2> 
<ul class="heroes"> 
    <li *ngFor="let hero of heroes" 
    [class.selected]="hero === selectedHero" 
    (click)="onSelect(hero)"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
    </li> 
</ul> 
<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> 


`, 


styles: [` 
.selected { 
    background-color: #CFD8DC !important; 
    color: white; 
} 
.heroes { 
    margin: 0 0 2em 0; 
    list-style-type: none; 
    padding: 0; 
    width: 15em; 
} 
.heroes li { 
    cursor: pointer; 
    position: relative; 
    left: 0; 
    background-color: #EEE; 
    margin: .5em; 
    padding: .3em 0; 
    height: 1.6em; 
    border-radius: 4px; 
} 
.heroes li.selected:hover { 
    background-color: #BBD8DC !important; 
    color: white; 
} 
.heroes li:hover { 
    color: #607D8B; 
    background-color: #DDD; 
    left: .1em; 
} 
.heroes .text { 
    position: relative; 
    top: -3px; 
} 
.heroes .badge { 
    display: inline-block; 
    font-size: small; 
    color: white; 
    padding: 0.8em 0.7em 0 0.7em; 
    background-color: #607D8B; 
    line-height: 1em; 
    position: relative; 
    left: -1px; 
    top: -4px; 
    height: 1.8em; 
    margin-right: .8em; 
    border-radius: 4px 0 0 4px; 
} 


`] 

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

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

Answer 1

在下面的循环中，我们打算每个槽距离英雄阵列的英雄：

<li *ngFor="let hero of heroes" 
    [class.selected]="hero === selectedHero" 
    (click)="onSelect(hero)"> 
    <span class="badge">{{hero.id}}</span> {{hero.name}} 
</li> 

所以每个项目将是一个不同的英雄。显示id和名称（分别使用{{hero.id}}和{{hero.name}}），但hero表示整个对象。

所以因为点击行为defind是： (click)="onSelect(hero)" 点击该项目将调用onSelect法，它代表为参数的英雄。

onSelect方法将传递给它的英雄作为参数分配给AppComponent的selectedHero字段。

在html模板中，您可以看到所选英雄的显示名称被定义为{{selectedHero.name}}，这意味着它将采用selectedHero字段中的名称值。