Угловое 2: Выберите выпадающий не выбирая опцию, несмотря на «выбранный» атрибут

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

Не используйте атрибут selected с ngModel и ngValue, но вместо того, чтобы присвоить значение выбранного элемента в UnitOfMeasurementId.

Важно, чтобы он имел экземпляр, используемый в качестве *ngFor. Некоторые другие экземпляры объектов с одинаковыми свойствами и одинаковыми значениями не будут работать.

Answer 2

attr.selected привязывает значение атрибута к переданному значению. Поэтому, если вы пройдете false, он установит selected="false", который не является тем, что вы хотите получить (так как он фактически выбирает элемент в соответствии со спецификацией HTML). Чтобы удалить атрибут, вы должны пройти null.

Использование:

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