如何使用Angular 2設置HTML選擇值

我想從Angular2組件的HTML下拉菜單中設置選定的值。我沒有看到，如果這應該是工作或我需要更復雜的東西如何使用Angular 2設置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，這沒有發生。

來源

2016-04-29 StackOverflower

對我的作品

@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在beta.17一個slightliy不同的語法（let而不是#）

Plunker example

來源

2016-04-29 13:07:38

這應該是你一個人。注意，可以把你的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。

來源

2016-04-29 13:08:46

您使用的是哪個版本的Angular2？ –

很難找到特定的角度版本的答案......所以，當使用更新的版本（角度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 = select「元素上的」ngModel「。

來源

2017-10-21 18:47:55

謝謝。當我試圖找到角度爲4或更高的角色時，我同意角度版本。順便說下你的評論是我的解決方案。 – Jnr

如何使用Angular 2設置HTML選擇值

回答

相關問題