テキストボックスの角2の値のバインド

Question

私はボタンbtnAddと、テキストボックスと、htmlファイルの編集ボタンbtnEditを持つリストを持っています。 btnAddをクリックすると、リストにテキストボックスの値が挿入され、btnEditをクリックすると、リストの選択された値をテキストボックスに表示します。

以下

私のコンポーネントコード：

以下

import { Component } from '@angular/core'; 
import {Hero} from './hero'; 

@Component({ 
    selector: 'my-Home', 
    templateUrl: 'app/Home/home.component.html', 
}) 
export class HomeComponent { 

    title = 'Tour of Heroes'; 
    newH : Hero; 
    heroes = [new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'), new Hero(20, 'Tornado')]; 

    addHero(newHero:string) { 
    this.title ="Button Clicked"; 
     if (newHero) {  
     let hero = new Hero(14,newHero); 
     this.heroes.push(hero); 
    } 
    } 

    onEdit(hero: Hero) { 
    // want to display selected name in textbox. 

    } 

} 

は、HTMLコードです：

以下

<input type = 'text' #newHero/> 
<button (click)=addHero(newHero.value)>Add Hero!</button> 

    <ul> 
     <li *ngFor="let hero of heroes" >   
     <span >{{ hero.id }}</span> {{ hero.name }}   
     <button (click)=onEdit(hero)>Edit!</button> 
     </li> 
    </ul> 

は私のクラスである：

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

おかげで、

Answer 1

あなたが結合することができます私の主人公の名前NPUTテキスト値：

<input type='text' [value]="selectedHero" #heroName/> 
<button (click)="addHero(heroName.value)">Add Hero!</button> 

export class HomeComponent { 
    selectedHero = ''; 
    onEdit(hero: Hero) { 
    this.selectedHero = hero.name; 
    } 
}