Question

原谅标题，我不完全确定我在这里要问的是什么。

我有一个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。

这会导致名称不更新，而值会更新。

有没有办法绑定多个值？当我在我的选择中选择一个选项时，我希望选择value更新OperatorID，然后选择text来更新OperatorName。

我该如何处理？

Answer 1

如果我正确理解了您的问题，您需要将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 
}

Answer 2

您可以使用组件中的函数并将其绑定到select的change事件，而不是使用ngModel。

模板：

        <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

Angular - 2路数据绑定多个值

2 个答案: