ボタンをクリックして角を使用して各値を編集して削除する

Question

配列から値を削除しようとしています。私は 'Remove'リンククリックの値を削除するロジックを書いています。もう一度アイテムの削除ボタンをクリックすると、そのアイテムだけを削除する必要があります。しかし、削除しようとしていたアイテムが だった場合は、最後に追加したアイテムだけが削除されていました。

また、編集をクリックするたびに、それらの値をドロップダウンリスト、テキストボックス、チェックボックス、または日付ピッカーに表示する必要があり、新しいアイテムを作成するのではなく、同じアイテムに値を保存できる必要があります。私はどのように私が この機能を達成することができるのか理解できませんでした。

誰かが私を助けることができますか？ここで

は、ここに私のHTML

<div class="col col-12 col-spacing"> 
    <div> 
    <md-select [placeholder]="result" [(ngModel)]="selectedItemType"> 
     <md-option *ngFor='let attr of result' [value]="attr.fieldType" selected="attr.fieldType"> {{attr.attribute}} 
     </md-option> 
    </md-select> 
    </div> 
    <div *ngIf="selectedItemType =='string' || selectedItemType =='decimal'"> 
    <input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered"> 
    </div> 
    <div> 
    <div *ngIf="selectedItemType == 'date'"> 
     <md-input-container class="datepicker-align"> 
     <input mdInput [mdDatepicker]="startDatepicker" placeholder="Select Date" name="StrtDate" id="txtStrtDate" [(ngModel)]="date" 
      #startDate> 
     <button id="btnOpnStartDate" mdSuffix [mdDatepickerToggle]="startDatepicker"></button> 
     </md-input-container> 
     <md-datepicker #startDatepicker></md-datepicker> 
    </div> 
    </div> 
    <div *ngIf="selectedItemType == 'boolean'"> 
    <input type="checkbox" [(ngModel)]="chkBox" /> 
    </div> 
    <button *ngIf="selectedItemType" md-raised-button (click)="Add()" color="accent">Add</button> 
    <md-list *ngFor='let selVal of finalValues'> 
    <md-list-item> 
     <span> {{ selVal.attributeName }} </span> 
     <span *ngIf="txtEntered">{{ selVal.value }} </span> 
     <span *ngIf="date">{{selVal.date}} </span> 
     <span *ngIf="chkBox"> {{selVal.checked}} </span> 
     <a href="#" md-menu-item color="warn" (click)="HandleEdit()" >Edit</a> 
     <a href="#" md-menu-item color="warn" (click)="HandleRemove(selVal.attributeName, selVal.value, selVal.date, selVal.checked)">Remove</a> 
    </md-list-item> 
    </md-list> 
</div> 

である私のtypescriptですクラスです。

export class testing { 

    Add() { 
     this.finalValues.push(new SelectedList(this.selectedItemType, this.txtEntered, this.date, this.chkBox)); 
    } 

    HandleEdit() { 

     return false; 
    } 

    HandleRemove(attr, txtValue, dateVal, checkBoxVal) { 
     this.finalValues.splice(this.finalValues.indexOf(attr), 1); 
     return false; 
    } 
    } 

は、ここに私のモデルクラス

export class SelectedList { 
    constructor(
     public attributeName: any, 
     public value: any, 
     public date: any, 
     public checked: boolean 
    ) {} 
} 

Answer 1

あなたはngForディレクティブを使用して配列の要素のインデックスに沿ってPASことができます。

テンプレート：

<ul *ngFor="let item of arr; let i = index"> 
<li (click)="remove(i)">{{item.prop}}</li> 
</ul> 

コンポーネント：

@Component({ ... }) 
export class MyComponent { 
    private arr: any[]; 

    removeItem(index: number) { 
    this.arr.splice(index, 1); 
    } 
} 

編集：

Plunkr example