onEdit clickは、選択した値を入力コントロールにバインドする必要があります

Question

UIの各コントロールに選択した値をバインドする際に問題が発生しました。ここにシナリオがあります。私はドロップダウンリストを持っています。ドロップダウンリストに基づいて、コントロールをUIにレンダリングします。ユーザーが[追加]をクリックすると。私は を配列に追加し、UIに表示しています。ユーザーが削除をクリックした場合。私は配列からその特定の項目を削除しています。しかし今、他の機能を持っています。ユーザーが[編集]ボタンをクリックすると、その特定の項目はUIの にレンダリングする必要があります。つまり、ドロップダウンリスト、テキストボックス、チェックボックス、日付ピッカーです。私は次のコードを試していると私はこの機能を達成する方法を固執した。

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

は私の活字体のコードです：ここで

export class TestClass{ 
Add() { 
     this.finalValues.push(new SelectedList(this.selectedItemType, this.txtEntered, this.date, this.chkBox)); 
    } 
HandleEdit(i) { 
     this.finalValues.find(i => i.attributeName); 

     return false; 
    } 

    HandleRemove(i) { 
     this.finalValues.splice(i, 1); 
     return false; 
    } 
} 

が私の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"> {{attr.attribute}} 
     </md-option> 
    </md-select> 
    </div> 
    <div *ngIf="selectedItemType =='string' || selectedItemType =='decimal' || selectedItemType == 'text' || selectedItemType == 'integer'"> 
    <input placeholder="Enter Text" type="text" class="input" [(ngModel)]="txtEntered"> 
    </div> 
    <div> 
    <div *ngIf="selectedItemType == 'date'" class="col col-2 col-spacing"> 
     <md-input-container class="datepicker-align"> 
     <input mdInput [mdDatepicker]="startDatepicker" [(ngModel)]='date' placeholder="Select Date" name="StartDate" id="txtStrtDate" 
      #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;let i=index'> 
    <md-list-item> 
     <span> {{ selVal.attributeName }} </span> 
     <span *ngIf="txtEntered">{{ selVal.value }} </span> 
     <span *ngIf="date">{{selVal.date}} </span> 
     <span *ngIf="chkBox && !date && !txtEntered"> {{selVal.checked}} </span> 
     <a href="#" md-menu-item color="warn" (click)="HandleEdit(i)" >Edit</a> 
     <a href="" md-menu-item color="warn" (click)="HandleRemove(i)">Remove</a> 
    </md-list-item> 
    </md-list> 
</div> 

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

ある

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

Answer 1

あなたのコードから、あなたが探しているように思えますこのようなもののために（また、本当に意図しない限り、メソッドから何かを返す必要はありません） 、

export class TestClass{ 
Add() { 
     this.finalValues.push(new SelectedList(this.selectedItemType, this.txtEntered, this.date, this.chkBox)); 
    } 
HandleEdit(i) { 
     this.selectedItemType = this.finalValues[i].attributeName; 
     this.txtEntered = this.finalValues[i].value; 
     this.date = this.finalValues[i].date; 
     this.chkBox = this.finalValues[i].checked; 
    } 

    HandleRemove(i) { 
     this.finalValues.splice(i, 1); 
    } 
} 

私は、これはあなたに、少なくともfinalValuesリストから右の要素を抽出するための基本的なアイデアを与えるし、[編集]をクリックしたときに所望の効果を達成するために、その内容を操作することを願っています。