Обновить значение элемента списка при нажатии кнопки в Angular 2

Question

У меня есть кнопка btnAddUpdate, текстовое поле и список с кнопкой редактирования 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')]; 


// 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> 

Надежда, что помогает!