如何在 Angular2 选择列表中手动选择一个选项？答案

【问题标题】：How do I manually select an option in a Angular2 select list?如何在 Angular2 选择列表中手动选择一个选项？
【发布时间】：2018-03-23 20:28:42
【问题描述】：

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

<form class="form-group">
   <select class="form-control" (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>
</form>

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

我该怎么做？有没有一些快速简单的方法来定位选择列表并分配一个 selectedIndex 或其他东西？

谢谢！

【问题讨论】：

只是数据被重置还是html刷新到？
你是指页面还是选择组件？ html 页面的其余部分将重置其数据，这只是这个下拉列表。我只需要它直观地返回显示最初的“请选择...”选项。选择它不会在幕后做任何事情，因为它的值是空的。现在，当页面的其余部分重置时，下拉菜单停留在其先前选择的选项上，并且不显示“请选择...”选项。

标签： angular select dropdown reset

【解决方案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

【讨论】：

天哪，谢谢，这对我有用！我知道这是我没有看到的超级简单的东西！