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路数据绑定多个值

回答

相关问题