Mise à jour la valeur de l'élément de la liste sur le bouton cliquez sur Angulaire 2

J'ai un bouton btnAddUpdate, une zone de texte et la liste avec un bouton modifier btnEdit dans un fichier html. Quand je clique sur btnAdd il insérer une zone de texte valeur dans la liste, et quand on clique sur btnEdit, il affichera la valeur sélectionnée dans la zone de texte et maintenant je veux mettre à jour cette valeur dans la liste.

Ci-dessous mon Code de Composant:

    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;

     }

Ci-dessous est un code 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>

Vous avez une question que vous êtes désireux de le demander?
Je veux o mise à jour de l'élément dans la liste. Veuillez lire ceci dans ma question " lors d'un clic sur btnEdit, il affichera la valeur sélectionnée dans la zone de texte et maintenant je veux mettre à jour que chenged valeur dans la liste."
Quel est le problème?
Salut problème n'est pas là, mais j'essaie de mettre à jour la valeur du héros sélectionné dans la liste.

InformationsquelleAutor Hitesh | 2016-12-19

angular typescript

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

Salut, Pas de travail parce que je veux mettre à jour heroname mais dans votre code, vous obtenez findhero si heroname correspond et que cela n'arrivera jamais parce que j'ai mis à jour nom dans la zone de texte de sorte que chaque fois il ajouter un nouveau nom à la place de updateding il
Maintenant son travail. Merci @Funstuff.

InformationsquelleAutor Bazinga

Lors de la modification, vous devez définir l'objet à une variable, il suffit de mettre la valeur de nom du héros ne fonctionne pas après tout, c'est juste une chaîne de caractères, voici un exemple de comment vous pourriez obtenir ce que vous voulez.
Juste cliquez sur modifier sur le héros que vous souhaitez, modifier le texte et appuyez sur ENTRÉE.

Composant:

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

Espère que ça aide!

InformationsquelleAutor penleychan

Vous devez vous connecter pour publier un commentaire.