在Angular 2的文本框中绑定值

Question

我有一个按钮 btnAdd ，一个文本框和一个带有编辑按钮 btnEdit 在 html 文件中的列表。当我点击 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

您可以将英雄名称绑定到输入文本值：

<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;
  } 
 }