Как установить значение выбора HTML с помощью Angular 2

Question

Я хочу установить выбранное значение из выпадающего списка HTML из компонента Angular2. Я не в состоянии увидеть, если это должно работать, или мне нужно что-то более сложное

HTML

<select class="form-control" id="role" [ngModel]="SelectedRole"> 
    <option *ngFor="#option of Roles" [value]="option.Value">{{option.Text}}</option> 
</select> 

COMPONENT

export class MyComponent extends Secured { 
    public SelectedRole: String = "4"; 

    ... 

    constructor() { 
    } 
} 

Из этого кода, я бы ожидать ITEM со значением 4, которое будет выбрано в начале, и этого не происходит.

Answer 1

Работы для меня

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Hello</h1> 
<select class="form-control" id="role" [ngModel]="selectedRole"> 
    <option *ngFor="let option of roles" [value]="option.value">{{option.text}}</option> 
</select> 
    `, 
}) 
export class AppComponent { 
    public selectedRole: String = "4"; 
    roles = [{value: '1', text: '1'}, {value: '2', text: '2'}, {value: '3', text: '3'}, {value: '4', text: '4'}] 

} 

Подсказка: *ngFor имеет slightliy другой синтаксис в beta.17 (let вместо #)

Plunker example

Answer 2

Это должно работать, как вы делали. Обратите внимание, что может поставить select в элемент формы:

<form> 
    <select class="form-control" id="role" [ngModel]="SelectedRole"> 
    <option *ngFor="#option of Roles" [value]="option.Value"> {{option.Text}}</option> 
    </select> 
</form> 

Смотрите эту plunkr: https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview.

Answer 3

Трудно найти ответы на конкретные угловые версии ... поэтому при поиске этой проблемы при использовании более новой версии (угловой 4.4.5) я наткнулся на эту тему. Однако ни один из ответов не работает для меня, так вот мое решение для более новых версий, в случае, если кто-то может наткнуться на эту тему тоже :-)

<select class="form-control" [(ngModel)]="size" name="sizeValue" #sizeValue="ngModel"> 
    <option *ngFor="let size of sizes" [value]="size">{{size}}</option> 
</select> 

В частности, эта часть: имя = #sizeValue «sizeValue» = "ngModel" на элементе select.