Question

我有一个按钮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>

Answer 1

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

Answer 2

编辑时你需要将对象设置为一个变量，只需将英雄的名字值设置为仅仅是一个字符串就可以了，这里举例说明如何实现你想要的。只需单击所需英雄的编辑，更改文本并按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：

<input type='text' [value]="selectedHeroText" #heroName (keypress)="updateHero($event)"/>
<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>

希望有所帮助！

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

2 个答案: