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

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

这是keyvalue管道迭代对象的完美用途，因此，您可以轻松地用于selected初始捕获true属性：<select (change)="selectCountry($event)">&nbsp; <option *ngFor="let item of myObject | keyvalue" [value]="item.key" [selected]="item.value">&nbsp; &nbsp; {{item.key}}&nbsp; </option></select>DEMO