2017-12-31 53 views

答えて

0

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

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というメソッドが呼び出され、ループ中にこのリスト要素に割り当てられたヒーローインスタンスが渡されます。

1

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' } 
]; 
関連する問題