Angular 更新角度2中单击按钮时列表项的值

我有一个按钮btnAddUpdate，一个文本框和一个列表，在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')];


// If not in list please add else Update list value.
      addHero(newHero:string) {
         this.title ="Button Clicked";
          if (newHero) {    
          let hero =  new Hero(14,newHero);   
          this.heroes.push(hero);
         }
      } 


       selectedHero = '';
    onEdit(hero: Hero) {   
    this.selectedHero = hero.name;

     }

以下是html代码：

<input type='text' [value]="selectedHero" #heroName/>
<button (click)="addHero(heroName.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>

添加英雄！


{{hero.id}{{hero.name}
编辑

编辑时，您需要将对象设置为变量，简单地输入英雄的名称值是行不通的，毕竟它只是一个字符串，下面是一个示例，说明如何实现您想要的。 只需单击所需英雄的“编辑”，更改文本并按ENTER键

组成部分：

@Component({
  selector: 'my-Home',
  templateUrl: './myhome.component.html',
})
export class HomeComponent{
  title = 'Tour of Heroes';
  heroes = [new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'), new Hero(20, 'Tornado')];

// If not in list please add else Update list value.
  addHero(newHero: string) {
    this.title = "Button Clicked";
    if (newHero) {
      let hero =  new Hero(14,newHero);
      this.heroes.push(hero);
    }
  }

  selectedHero: Hero;
  selectedHeroText: string = "";

  onEdit(hero: Hero) {
    this.selectedHeroText = hero.name;
    this.selectedHero = hero;
  }
  updateHero(event) {
    if(event.which === 13) {
      if(this.selectedHero !== undefined)
        this.selectedHero.name = event.target.value;
    }
  }
}

HTML:

添加英雄！


{{hero.id}{{hero.name}
编辑

---

希望有帮助

编辑时，您需要将对象设置为变量，简单地输入hero的name值是行不通的，毕竟它只是一个字符串，下面是一个如何实现所需的示例。

import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';

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

@Component({
  selector: 'my-app',
  template: `
      <input type="text" [(ngModel)]="heroName" />
      <button (click)="addHero()">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 App {
  heroName: string = '';
  heroes: Array<Hero> = [new Hero(1, 'One'), new Hero(2, 'Two')];
  lastName: string;

  addHero() {
    const findHero = this.heroes.find(hero => hero.name === this.lastName);
    if(findHero) {
      findHero.name = this.heroName;
    } else {
      this.heroes.push(new Hero(3, this.heroName));
    }

    this.heroName = '';
  } 


  onEdit(hero) { 
    this.lastName = hero.name;
    this.heroName = hero.name;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

只需单击所需英雄的“编辑”，更改文本并按ENTER键

组成部分：

@Component({
  selector: 'my-Home',
  templateUrl: './myhome.component.html',
})
export class HomeComponent{
  title = 'Tour of Heroes';
  heroes = [new Hero(1, 'Windstorm'), new Hero(13, 'Bombasto'),new Hero(15, 'Magneta'), new Hero(20, 'Tornado')];

// If not in list please add else Update list value.
  addHero(newHero: string) {
    this.title = "Button Clicked";
    if (newHero) {
      let hero =  new Hero(14,newHero);
      this.heroes.push(hero);
    }
  }

  selectedHero: Hero;
  selectedHeroText: string = "";

  onEdit(hero: Hero) {
    this.selectedHeroText = hero.name;
    this.selectedHero = hero;
  }
  updateHero(event) {
    if(event.which === 13) {
      if(this.selectedHero !== undefined)
        this.selectedHero.name = event.target.value;
    }
  }
}

HTML:

添加英雄！


{{hero.id}{{hero.name}
编辑

希望有帮助

从'@angular/core'导入{Component，NgModule}
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms';

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

@Component({
  selector: 'my-app',
  template: `
      <input type="text" [(ngModel)]="heroName" />
      <button (click)="addHero()">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 App {
  heroName: string = '';
  heroes: Array<Hero> = [new Hero(1, 'One'), new Hero(2, 'Two')];
  lastName: string;

  addHero() {
    const findHero = this.heroes.find(hero => hero.name === this.lastName);
    if(findHero) {
      findHero.name = this.heroName;
    } else {
      this.heroes.push(new Hero(3, this.heroName));
    }

    this.heroName = '';
  } 


  onEdit(hero) { 
    this.lastName = hero.name;
    this.heroName = hero.name;
  }
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule}；
出口级英雄{
构造函数（public id:number，public name:string）{}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
添加英雄！


{{hero.id}{{hero.name}
编辑


`,
})
导出类应用程序{
heroName:string=''；
英雄：数组=[新英雄（1，'1'），新英雄（2，'2'）；
lastName:string；
addHero（）{
const findHero=this.heros.find（hero=>hero.name==this.lastName）；
如果（芬德罗）{
findHero.name=this.heroName；
}否则{
this.heros.push（新英雄（3，this.heroName））；
}
this.heroName=''；
} 
onEdit（英雄）{
this.lastName=hero.name；
this.heroName=hero.name；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

从“@angular/core”导入{Component，NgModule}
从“@angular/platform browser”导入{BrowserModule}
从'@angular/forms'导入{FormsModule}；
出口级英雄{
构造函数（public id:number，public name:string）{}
}
@组成部分({
选择器：“我的应用程序”，
模板：`
添加英雄！


{{hero.id}{{hero.name}
编辑


`,
})
导出类应用程序{
heroName:string=''；
英雄：数组=[新英雄（1，'1'），新英雄（2，'2'）；
lastName:string；
addHero（）{
const findHero=this.heros.find（hero=>hero.name==this.lastName）；
如果（芬德罗）{
findHero.name=this.heroName；
}否则{
this.heros.push（新英雄（3，this.heroName））；
}
this.heroName=''；
} 
onEdit（英雄）{
this.lastName=hero.name；
this.heroName=hero.name；
}
}
@NGD模块({
导入：[BrowserModule，FormsModule]，
声明：[App]，
引导：[应用程序]
})
导出类AppModule{}

您有什么问题要问吗？我想更新列表中的项目。请阅读我的问题“当点击btnEdit时，它将在文本框中显示所选值，现在我想更新列表中的已转换值。”问题是什么？Hi issue不存在，但我尝试更新列表中所选英雄的值。你有问题要问吗？我想更新列表中的项目。请阅读我的问题“当点击btnEdit时，它将在文本框中显示所选值，现在我想更新列表中的所选值。”问题是什么？Hi issue不存在，但我尝试更新列表中所选英雄的值。Hi，不起作用，因为我想更新heroname，但在您的代码中，如果heroname匹配，您会得到findhero，这永远不会发生，因为我在textbox中更新了名称，所以每次它都会添加新名称，而不是更新ITI，不起作用，因为我想更新heroname，但在您的代码中，如果heroname匹配，您会得到findhero，这永远不会发生，因为我在textbox中更新了名称，所以每次它都会添加新名称，而不是更新名称