Question

我想将一个HTML下拉列表与一个由配对键值组成的对象进行数据绑定，如下所示：

var myObject = { 
   'France': true,
   'Morocco': false,
   'US': false,
   'India': false
}

该对象的一个属性只能为true，此属性表示下拉列表中的选定元素。

这是我的角度代码：

<select class="form-control select select-items select-selected" #t (ngModelChange)="getNightlyType(t.options[t.selectedIndex].text)" [(ngModel)]="myObject[t.options[t.selectedIndex].text]">
    <option *ngFor="let key of objectKeys(myObject)" [ngValue]="myObject[key]">{{ key }}</option>
</select>

getNightlyType()：将为所选元素设置值为true，为所有其他元素设置false，如下所示：

getNightlyType(country: any) {
  for (let element in myObject) {
    if (element !== country) {
      myObject[element] = false;
    } else {
      myObject[element] = true;
    }
  }
}

问题是，如果我给出的国家/地区对象的值为true，则该对象不会自动绑定到gui。

Answer 1

代替两种方式的绑定，一种干净的方法是使用一个输入和一个更改事件侦听器。

[value]调用getSelected（），该方法获取myObject中值为true的第一个键
（更改）通过change事件调用selectCountry（），我们可以从中获取所选值并调用getNightlyType（）来适当地修改对象。

dropdown.component.html

var bitmask = o2["bitmask"].ToObject<List<List<float>>>();

dropdown.component.ts

<select [value]="getSelected()" (change)="selectCountry($event)">
  <option *ngFor="let key of objectKeys(myObject)" [ngValue]="myObject[key]">{{ key }}</option>
</select>

Stackblitz示例：https://stackblitz.com/edit/angular-object-select?file=src%2Fapp%2Fapp.component.html

Answer 2

这是keyvalue管道迭代对象的完美方法，因此，您可以轻松地使用selected来初始捕获true属性：

<select (change)="selectCountry($event)">
  <option *ngFor="let item of myObject | keyvalue" [value]="item.key" [selected]="item.value">
    {{item.key}}
  </option>
</select>

裘德·拉杰（Jude Raj）的StackBlitz叉： DEMO

对键值的double数据绑定对象，用于下拉菜单

2 个答案: