Angular 2でHTML選択値を設定する方法

Question

Angular2コンポーネントからHTMLドロップダウンから選択した値を設定したいとします。私はこれが動作する必要があるかどうかを確認するために失敗してるか、私はこのコードから、より複雑なもの

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() { 
    } 
} 

を必要とする、私はアイテムを期待します値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あなたが行ったようにこれは動作するはず

Plunker example

Answer 2

beta.17に（代わりに#のlet）をslightliy異なる構文を持っています。フォーム要素の中にあなたのselectを置くことができお知らせ：https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview：

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

このplunkrを参照してください。

Answer 3

最近のバージョン（角4.4.5）を使用している間にこの問題を検索しているうちに、このスレッドを見つけました。 名=「sizeValue」#sizeValue：しかし答えのどれもので、ここで私のために働くことは他の誰かがこの部分あまりにも特に

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

:-)このスレッドつまずく可能性がある場合は、新しいバージョンのための私の解決策ではありません= "ngModel"を選択します。