ボタン2をクリックして角度2のアイテムを更新する方法は？

Question

ボタン2をクリックしてアイテムを更新する方法を教えてください。listのアイテムをdeleteとeditボタンで追加しています。 editボタンをクリックすると、入力フィールドに現在の項目textがupdateボタンで設定されます。 updateボタンをクリック後、選択した項目のtextを更新したいと思います。ここ

は私のコード

https://plnkr.co/edit/F4fk8VAPzu24P8wRBY5A?p=preview

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(){ 

    } 

Answer 1

これを達成するには、トグルの概念を使用する必要があります。あなたはeditItem（内部のインデックス変数を作成している

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

更新plunker

Answer 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; 
} 

Answer 3

グローバル変数

を使用する必要はありません）。代わりにthis.indexを使用してください。 https://plnkr.co/edit/nllh0YZzcMACexiMZwFy?p=preview

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