Angular - 2路數據綁定多個值

原諒標題，我不完全確定我在這裏要問什麼。Angular - 2路數據綁定多個值

我有一個html表，並使用*ngFor遍歷數據對象。在這個迭代中，我打印出特定字段的值並附加一個*ngIf。當我的表格處於「編輯模式」時，文本值消失，並顯示下拉菜單以允許用戶更改值。

該下拉列表使用ngModel，我可以看到我的數據在我的json內正確更新，而且我的下拉列表正下方。然而，我的問題是，此下拉列表綁定到我的對象中的OperatorID（這是正確的），但下拉菜單中的Text是該對象的不同部分。

HTML：

<td class="small col-md-1 oper"> 
    <span *ngIf="!inEditMode(r.RuleParentID, a.AttributeID)"> 
    <strong>{{ a.OperatorName }}</strong> 
    </span> 
    <select class="form-control input-sm" [(ngModel)]="a.OperatorID" *ngIf="inEditMode(r.RuleParentID, a.AttributeID)"> 
    <option *ngFor="let o of fetchOperatorList(a.AttributeID)" [value]="o.OperatorID" [selected]="o.OperatorID === a.OperatorID">{{ o.OperatorName }}</option> 
    </select> 
</td>

數據對象：

{ 
    "AttributeID": "2", 
    "AttributeName": "Role", 
    "OperatorID": "3", 
    "OperatorName": "In List", 
    "SqlOperator": "IN" 
}

我現在面臨的問題是，一旦我更改下拉的價值和它在我的對象更新OperatorID ，然後我禁用「編輯模式」，該模式將下拉回到它從*ngFor打印的內插文本中，該文本是OperatorName e對象。

這導致名稱不是得到更新，值是得到更新。

有沒有辦法綁定多個值？例如，當我在我的選擇中選擇一個選項時，我想要選擇value以更新OperatorID，並選擇text以更新OperatorName。

我該如何解決這個問題？

來源

2017-09-18 SBB

如果我正確地理解了您的問題，您需要將a.OperatorName更新爲與新選擇對應的任何內容（基於id）。您應該可以通過綁定到選擇更改事件來實現此目的。

<select class="form-control input-sm" 
     [(ngModel)]="a.OperatorID" 
     *ngIf="inEditMode(r.RuleParentID, a.AttributeID)" 
     (change)="onChange($event.target.value)"> 
    <option *ngFor="let o of fetchOperatorList(a.AttributeID)" [value]="o.OperatorID" [selected]="o.OperatorID === a.OperatorID">{{ o.OperatorName }}</option> 
</select>

然後在你的組件中。

public onChange(operatorId) { 
    // update operator object in collection based on id 
}

來源

2017-09-18 23:23:38

有道理 - 在這種情況下，它毫無意義，甚至使用'ngModel'然後當我可以只通過'$事件'到'onChange'並同時進行兩個更新是正確的？ – SBB

是的，如果你要更新集合中的對象，那麼你不需要綁定'ngModel'，因爲你會替換整個實例。你也可以像在這個'（change）=「a.OperatorName = $ event.target.value'上那樣做動態變化，但是如果你不更新整個事物 –

聽起來不錯 - 我將使用'onChange'事件，然後在我的對象中搜索我需要更新數據的位置並且這樣做。 – SBB

除了使用ngModel之外，還可以在組件中使用函數並將其綁定到select的change事件。

模板：

 <div>{{selectedOperator | json}}</div> 
     <select class="form-control input-sm" #mySelect  
      (change)="onSelectChange(mySelect.value)"> 
      <option *ngFor="let o of operators" 
      [value]="o.OperatorID" [selected]="o.OperatorID ===  selectedOperator.OperatorID">{{ o.OperatorName }}</option> 
     </select>

組件：

selectedOperator; 

    operators = [ 
     { 
     OperatorID: 1, 
     OperatorName: "Foo" 
     }, 
     { 
     OperatorID: 2, 
     OperatorName: "Bar" 
     }, 
     { 
     OperatorID: 3, 
     OperatorName: "Awesomesauce" 
     } 
    ] 

    onSelectChange(id) { 

     this.selectedOperator = this.operators.find(i => i.OperatorID === Number(id)); 


    } 

    ngOnInit(){ 
     this.selectedOperator = this.operators[2]; 
    }

Plunker：https://plnkr.co/edit/G0N7xvVDJEokDEwnMsvS

來源

2017-09-18 23:35:30 bgraham

Angular - 2路數據綁定多個值

回答

相關問題