如何在Angular2选择列表中手动选择一个选项?

时间:2018-03-23 20:28:43

标签: angular select dropdown reset

我觉得这应该非常容易,但我无法让它发挥作用。我正在从别人那里接管一个项目,所以已经完成了很大的块。 我在HTML中定义了非动态选择列表。

[['Met', 'Phe', 'Pro', 'Ala', 'Ser'], ['Met', 'Ser', 'Gly', 'Gly'], ['Met', 'Thr', 'Trp']]
[Finished in 0.204s]

到目前为止一切正常。 页面上有一个重置按钮,用于在单击时重置应用程序中的所有数据,因此还需要重置此下拉列表。应用程序中的数据已经重置,我需要做的就是将此下拉列表重新分配给它的第一个“请选择预设”选项。

我该怎么做?是否有一些快速简单的方法来定位选择列表并分配selectedIndex或什么?

谢谢!

1 个答案:

答案 0 :(得分:1)

HI @Hopper在Angular中使用ngModel进行绑定

你的模板就像那样

Selected Value :- {{presetModel}}

<select class="form-control" [(ngModel)]="presetModel" (change)="changePreset()">
  <option value="">Please choose a preset</option>
  <option value="preset1">Preset 1</option>
  <option value="preset2">Preset 2</option>
  <option value="preset3">Preset 3</option>
  <option value="preset4">Preset 4</option>
  <option value="preset5">Preset 5</option>
</select>

<button (click)="reset()">Reset</button>

你的组件类将是

import { Component, OnInit } from '@angular/core'; 


@Component({
  selector: 'my-app',
  templateUrl: './src/app/app.component.html'
})
export class AppComponent{ 
    presetModel:string =""; 


   changePreset(){
       // TODO this.presetModel
   }

   reset(){
       this.presetModel = "";
   }

}

Link for Plunker for this