インポートされたコンポーネントを使用する際の質問

Question

私は角度js2の新人です。チュートリアルを試して、試してみましたが、下の1つの問題に固執しました。誰がこれを知っているだろうか？

以下は私のコード

app.component.ts

import {Component} from 'angular2/core'; 
import {Items} from './test_items'; 

@Component({ 
    selector: 'my-app', 
    template:`   
     <div class="content-wrapper"> 
      <div class="content"> 
       <ul> 
        <li *ngFor="#hero of heroes"> 
         <span>{{hero.id}}</span> {{hero.name}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    ` 
}) 

export class AppComponent { 
    public title = 'Test'; 
} 

test_items.ts

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

var 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" } 
]; 

export class Items { 
    public heroes = HEROES; 
} 

予想通りの英雄のリストが出て表示されませんです。他のコンポーネントからリストを取得することには制限がありますか？

Answer 1

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 
import {Items,Hero} from './comp'; 

@Component({ 
    selector: 'app', 
    template:`   
     <div class="content-wrapper"> 
      <div class="content"> 
       <ul> 
        <li *ngFor="#hero of heroes"> 
         <span>{{hero.id}}</span> {{hero.name}} 
        </li> 
       </ul> 
      </div> 
     </div> 
    ` 
}) 

export class AppComponent { 
    public title = 'Test'; 
    heroes:Hero[]; 

    constructor(items:Items) 
    { 
    this.heroes = items.heroes; 
    } 
} 

bootstrap(AppComponent, [Items]); 

これは役に立ちます。

Answer 2

コンポーネントのビューは、コンポーネントのそれとはまったく反復します（heroes）。しかし、そのような配列はまったくありません。コンポーネントが持つ唯一のものはタイトルです。

全く関係のないクラスItemsには、heroesという名前のフィールドがあるということは無関係です。コンポーネントにItemsをインポートしたということもあります。

インポートは、ItemsのすべてのフィールドがAppComponentのフィールドになることを意味するものではありません。コンパイラとランタイムは、コードをコンパイル/実行するときに、Itemsクラスを探す場所を知っているだけです。しかし、AppComponentはクラスItemsを使用していないので、インポートは役に立たない。