onEdit click應該將選定的值綁定到輸入控件

我正面臨着將所選值綁定到UI中的相應控件的問題。這是場景。我有一個下拉列表。根據下拉列表，我將把控件呈現給UI。當用戶點擊添加。我將它加到到一個數組並顯示在UI中。如果用戶點擊刪除。我正在從數組中刪除該特定項目。但是現在，我擁有其他功能。當用戶點擊編輯按鈕時，該特定項目需要在用戶界面中呈現爲，即它對應的控件，即下拉列表，文本框，複選框，日期選擇器。我正在嘗試下面的代碼，並堅持如何實現這一功能。onEdit click應該將選定的值綁定到輸入控件

有人可以幫我解決這個問題嗎？

這裏是我的打字稿代碼：

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

來源

2017-09-16 user2083386

從你的代碼好像你正在尋找對於這樣的事情（同樣，除非你真的打算，否則你不必從方法中返回某些東西），

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名單的權利元素和操作的內容，以實現點擊編輯預期的效果。

來源

2017-09-16 05:09:05 amal

onEdit click應該將選定的值綁定到輸入控件

回答

相關問題