如何使用按钮单击更新angular 2中的项目？

您能告诉我如何使用按钮点击更新angular 2中的项目吗？我正在使用删除和编辑按钮在列表中添加项目。当我点击编辑按钮时，我用更新按钮在输入字段中设置当前项目文本。我想在单击“更新”按钮后更新所选项目的文本

这是我的密码

尝试下面的代码，将currentIndex作为全局变量来跟踪当前索引

currentIndex=0;
editItem(item){
this.update =true;
console.log(item);
var index = this.items.indexOf(item);
this.currentIndex = index;
this.val=this.items[index];
}

updateItem(){
  this.items[this.currentIndex] = this.val;
}

---

您应该使用切换概念来实现这一点

<button (click)="addItem(name)">ADD Item</button>
   <button *ngIf="update" (click)="updateItem()">Update</button>
    <input type="text" name="" [(ngModel)]="name"/>
     <ul>
       <li *ngFor="let item of items; let i=index">
        <span  *ngIf="!item.editMode">{{item.name}}</span>
        <input type="text"  *ngIf="item.editMode" [(ngModel)]="item.name"/>
         <button (click)="deleteItem(item)">X</button>
         <button (click)="item.editMode= !item.editMode">Edit</button>
       </li>
     </ul>

---

更新的

无需使用全局变量

您已经在editItem中创建了索引变量；改用这个.index。

---

是的，我接受你的回答

<button (click)="addItem(name)">ADD Item</button>
   <button *ngIf="update" (click)="updateItem()">Update</button>
    <input type="text" name="" [(ngModel)]="name"/>
     <ul>
       <li *ngFor="let item of items; let i=index">
        <span  *ngIf="!item.editMode">{{item.name}}</span>
        <input type="text"  *ngIf="item.editMode" [(ngModel)]="item.name"/>
         <button (click)="deleteItem(item)">X</button>
         <button (click)="item.editMode= !item.editMode">Edit</button>
       </li>
     </ul>

    //our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `

<div>
  <h1>{{title}}</h1>
   <button (click)="addItem()">ADD Item</button>
   <button *ngIf="update" (click)="updateItem()">Update</button>
    <input type="text" name="" (keyup)="onKeyP($event)" [value]="val"/>
     <ul>
       <li *ngFor="let item of items">
        <span>{{item}}</span>
         <button (click)="deleteItem(item)">X</button>
         <button (click)="editItem(item)">Edit</button>
       </li>
     </ul>
</div>

  `,
})
export class App {
   title = 'Times point';
  name ="hellxo";
  val ="defual";
  items=[];
  update=false;
  onKeyP(event){
    console.log(event.target.value);
    this.val=event.target.value
  }

  addItem(){
    if(this.val){
    this.items.push(this.val);
    this.val ='';
    }
  }
  deleteItem(item){
    console.log(item);
    var index = this.items.indexOf(item);
    this.items.splice(index,1);
  }

  editItem(item){
    this.update =true;
    console.log(item);
    var index = this.items.indexOf(item);
    this.val=this.items[index];

  }

  updateItem(){

  }
}

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