角度2 @選択したドロップダウンからの入力パラメータ

親コンポーネントからパラメータ@inputを渡す際に問題が発生しています。私はカスケードドロップダウンを作成しようとしています。親コンポーネントに1つのドロップダウン、子供に1つのドロップダウンがあります。親のドロップダウンを選択すると、子のドロップダウンに値を設定します。私は@Inputパラメータを使用してそれを達成しようとしていますが、動作していないようです。角度2 @選択したドロップダウンからの入力パラメータ

[http://plnkr.co/edit/uyE5XIasBdh3OwQhvHwb?p=preview] 

export class Hero { 
    constructor(public id:number, public name:string) 
} 

App Component 

import { Hero } from './hero'; 

const HEROES: Hero[] = [ 
    { id: 11, name: 'Mr. Nice' }, 
    { id: 12, name: 'Narco' }, 
    { id: 13, name: 'Bombasto' }, 
    { id: 14, name: 'Celeritas' } 
]; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>{{title}}</h1> 
    <h2>My Heroes</h2> 
    <select class="form-control" (change)="onSelect($event.target.value)"> 
     <option *ngFor="let hero of heroes" value="{{hero.id}}">{{hero.name}}</option> 
    </select> 
    <my-hero-detail [hero]="selectedHero"></my-hero-detail> 
    ` 
}) 
export class AppComponent { 
    heroes = HEROES; 
    selectedHero: Hero; 

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


Child Component 

@Component({ 
    selector: 'my-hero-detail', 
    template:` 
    <div *ngIf="hero"> 
     <div>details!</div> 
     <h2>Name: {{hero.name}}</h2> 
     <div><label>id: </label>{{hero.id}}</div> 

    </div>` 
}) 
export class HeroDetailComponent { 
    @Input() 
    hero: Hero; 
}

出典

2016-10-18 Abdul

にそのようなオブジェクトを割り当てます。 SOが、コードを直接追加することなく、Plunkerリンクを許可しない理由があります。 –

上記のプランカコードの子コンポーネントにドロップダウンが表示されませんでした。あなたが親から子供に渡す唯一の入力は、 "ヒーロー"です。これは –

です。残念ながら、これは私の初めての投稿なので、わかりませんでした。 @GopinathShivaドロップダウンはapp.components.tsテンプレートにあります。 – Abdul