角度2マスター/ディテールnead説明

Question

私はAngular 2で新しく、これは公式サイトのコードです。私はすべてのクラス、インポート、リスト、HTMLタグを理解しています。しかし、私はonSelect（英雄）のmetodを理解していません。 * ngディレクティブリストのIDと名前。リストを選択すると、詳細が表示されます。方法はどのように機能しますか？それはデータを取得しますが、どのように私には分かりません。我々はHEROES配列からトラフ英雄のそれぞれを行っている、次のループでは

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フィールドの名前の値が使用されます。