如何使用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选择值

回答

相关问题