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字段中的名稱值。