Angular 2:尽管选择了"selected"属性,但选择下拉列表不选择选项

Question

我有一个选择下拉列表的以下代码:

<select id="UnitOfMeasurementId" name="UnitOfMeasurementId" [(ngModel)]="UnitOfMeasurementId">
    <option *ngFor="let unit of UnitOfMeasurements" [ngValue]="unit.Value" [selected]="unit.Selected">{{unit.Text}}</option>
</select>

UnitOfMeasurements数组中的每个项看起来像这样:

Selected: false
Text: "lb"
Value: "1"

或这个:

Selected: true
Text: "kg"
Value: "3"

[(ngModel)]="UnitOfMeasurementId"包含应选择的项的值.在此特定示例中,该值为3,因此应选择第3个项目.果然,当我检查它显示ng-reflect-selected="true"在正确项目上的元素时,实际上没有选择任何东西.如何才能获得列表中的正确项目以实际动态选择而不是仅添加ng-reflect-selected="true"属性？

Answer 1

attr.selected绑定将属性值设置为传递的值.因此,如果你通过false它将设置selected="false"哪个不是你想要的(因为它根据HTML规范实际选择了元素).要删除必须传递的属性null.

使用:

[attr.selected]="unit.Selected ? '' : null"