使用Angular以编程方式在引导程序表单中设置选择字段值

Question

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

这是模板的代码：

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

并在组件中，您可以将所选值设置为

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>

  

在.ts

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