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

How to set HTML select value with Angular 2

本文关键字：HTML 选择 设置 何使用 Angular      更新时间：2023-09-26

我想从Angular2组件的HTML下拉列表中设置所选值。我不知道这是否应该起作用，或者我需要更复杂的

HTML

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

组件

export class MyComponent extends Secured {
    public SelectedRole: String = "4";
    ...
    constructor() {
    }
}

从这段代码中，我希望在开始时选择值为4的项，但这并没有发生。

适用于我的

@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示例

这应该像您一样工作。注意，这可能会将您的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.

很难找到特定角度版本的答案。。。因此，在使用最新版本（angular 4.4.5）搜索这个问题时，我偶然发现了这个线程。然而，这些答案都不适用于我，所以这里是我的新版本解决方案，以防其他人也会偶然发现这个线程：-）

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

特别是这部分：name="sizeValue"#sizeValue="ngModel"在select元素上。

相关文章：