对键值的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)">

  <option *ngFor="let item of myObject | keyvalue" [value]="item.key" [selected]="item.value">

    {{item.key}}

  </option>

</select>

DEMO