使用 Angular 以编程方式在 bootstrap 表单中设置 select 字段值

Question

如何以编程方式 select select 字段中的选项之一（基于某些变量）？

这是模板的代码：

<div class="form-group" >
    <label for="selectAction">Action</label>
    <select ngModel name="option" class="form-control" id="selectAction">
        <option *ngFor="let op of options" [value]="op.id">
            {{ op.description }}
        </option>
    </select>
</div>

Answer 1

尝试如下，

  <select class="form-control" name="selectAction" 
 [(ngModel)]="selected">
        <option *ngFor="let op of options" [value]="op.id">>
          {{op.description}}
        </option> 
  </select>

并且在 component 中，您可以将选择的值设置为

this.selected = this.options[0].id;

Answer 2

<div class="form-group" >
    <label for="selectAction">Action</label>
    <select ngModel name="option" class="form-control" id="selectAction" (change) = "functionname(t.value)" #t>
        <option *ngFor="let op of options" [value]="op.description">
            {{ op.description }}
        </option>
    </select>
</div>

In .ts

functionname(value){
console.log(value);
}