イベントバインディングと値の受け渡し方法

Question

イベントバインディングが新しく、()で値が渡された理由とその値がロードされる理由を理解できません。私は角度tutorial私は（主人公が）から来たのかを理解し、私ができる、このコードに基づいて、どのデータ

Answer 1

をロードする方法を知ることができない

selectedHero: Hero; 

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

どの部分

<li *ngFor="let hero of heroes" (click)="onSelect(hero)"> 

を以下のいこのコンポーネントがheroesという配列を持つクラスで実装されているとします。コンポーネントのテンプレートには、リストがあります。 <ul>。 *ngForディレクティブは配列heroesを反復処理し、各配列要素に対して1つの<li>要素を作成します。変数heroは、配列を繰り返し処理するために使用されています。

ループの完了後、各<li>の値は配列のHeroの1つのインスタンスであり、各<li>にはクリックリスナーがあります。リスト要素（<li>）をクリックすると、onClickというメソッドが呼び出され、ループ中にこのリスト要素に割り当てられたヒーローインスタンスが渡されます。

Answer 2

heroオブジェクトは*ngFor="let hero of heroes"からのものです。

ngFor指示：は、そのテンプレートのコンテキストとして繰り返し可能な各項目を使用してテンプレートを繰り返す方法です。

ヒーローのすべてのループは特定のheroオブジェクトを使用し、を使用してonClickイベントをバインドするli要素を作成します。

onSelect(hero: Hero): voidとしてonSelectメソッドがコンポーネントで宣言されています。この宣言では、コンポーネントのセレクタ内の任意の場所で使用できます。

一方、heroesオブジェクトは、タイプheroの配列であり、コンポーネント内に以前にロードされます。

おそらく、その配列はロードするために特定のサービスを呼び出すようにロードされました。それはレンダリングされる必要なデータをロードするためにすべてのコンポーネントが最初に行う必要があります。 heroesに関する

HeroesComponent成分のデータは以下のように宣言された：そのチュートリアルで

heroes = HEROES; 

、heroesデータはこのファイルmock-heroes.tsによって提供され、その内容は以下の通りである：

import { Hero } from './hero'; 

export 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' } 
];