Angular 2：尽管有“selected”属性，但选择下拉菜单不选择选项答案

【问题标题】：Angular 2: Select dropdown not selecting option despite "selected" attributeAngular 2：尽管有“selected”属性，但选择下拉菜单不选择选项
【发布时间】：2017-04-05 11:16:18
【问题描述】：

我有以下代码用于选择下拉菜单：

<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" 属性？

【问题讨论】：

尝试使用[attr.selected] 而不是[selected]
这也不起作用。它将 selected="true" 设置为应选择的一项，并将所有其他项设置为 "selected="false"，但实际上并未选择该项目。下拉标签为空白，因此用户认为没有选择任何内容。

标签： angular ngfor angular2-ngmodel

【解决方案1】：

attr.selected 绑定将属性值设置为传递的值。因此，如果您通过 false 它将设置 selected="false" 这不是您想要获得的（因为它使元素根据 HTML 规范实际选择）。要删除属性，您必须通过 null。

用途：

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

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！
@kayess，是的，完全同意。更新
这会将“selected”属性添加到正确的选项中，但是当页面加载时，下拉列表的标签仍然是空白的，因此用户无法判断是否选择了任何内容。仍然必须手动选择一个选项才能显示标签。

【解决方案2】：

不要将selected 属性与ngModel 和ngValue 一起使用，而是将所选项目的值分配给UnitOfMeasurementId。

它与*ngFor 中使用的实例具有相同实例，这一点很重要。其他一些具有相同属性和相同值的对象实例将无法工作。

【讨论】：

这到底是什么意思？选择项目时，ngValue 将正确的值传递给 UnitOfMeasurementId。
可以，但是如果你想定义最初选择的项目，那么你需要自己设置UnitOfMesurementId。然后ngModel 会注意选择正确的。