javascript - 键值对的双数据绑定(bind)对象，用于下拉列表

Question

我想将一个 html 下拉列表与一个由键值对组成的对象进行数据绑定(bind)，如下所示:

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

对象的一个​​属性只能为真，这个属性代表下拉框被选中的元素。

这是我的 Angular 代码:

<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，它不会自动绑定(bind)到 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>

Jude Raj 的 StackBlitz 的一个分支: DEMO