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的ítem，并且这种情况不会发生。

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在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>

特别是这一部分：select元素上的 name =“sizeValue”＃sizeValue =“ngModel”。

如何使用Angular 2设置HTML选择值

3 个答案: