typescript 在 Angular 2 中单击按钮时更新列表项的值
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/41215713/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Update value of list item on button click in Angular 2
提问by Hitesh
I have a button btnAddUpdate, a textbox and list with a edit button btnEdit in a html file. When I click on btnAdd it insert a textbox value into list and when click on btnEdit, it will display selected value in textbox and now I want to update that value in list.
我在 html 文件中有一个按钮 btnAddUpdate、一个文本框和一个带有编辑按钮 btnEdit 的列表。当我单击 btnAdd 时,它会在列表中插入一个文本框值,当单击 btnEdit 时,它将在文本框中显示选定的值,现在我想在列表中更新该值。
Below is my Component Code:
以下是我的组件代码:
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;
}
Below is html 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>
回答by Bazinga
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 {}
回答by penleychan
When editing you need to set the object to a variable, simply putting the name value of the hero won't work after all it's just a string, here an example how you would achieve what you want. Just click edit on the hero you want, change the text and press ENTER.
编辑时需要将对象设置为变量,简单地输入英雄的名称值是行不通的,毕竟它只是一个字符串,这里是一个示例,如何实现您想要的。只需在您想要的英雄上单击编辑,更改文本并按 ENTER。
Component:
零件:
@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:
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>
Hope that helps!
希望有帮助!