4

我有以下代码用于选择下拉列表：

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

4

2 回答 2

5

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

采用：

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

于 2016-11-22T07:13:53.453 回答
4

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

重要的是它具有与中使用的实例相同*ngFor的实例。其他一些具有相同属性和相同值的对象实例将不起作用。

于 2016-11-22T07:25:56.903 回答