如何在Angular2下拉选择列表中手动重置选中初始选项？

太懂这种看似简单却卡壳的感觉了！针对你这个Angular下拉框重置的需求，有两个快速好用的方法：

方法一：用双向数据绑定（推荐） #

这是最符合Angular数据驱动理念的方式，不需要直接操作DOM：

1. 在组件类中定义绑定变量
   在你的组件.ts文件里添加一个变量，用来绑定下拉框的选中值：

   selectedPreset: string = ''; // 默认值设为空，对应第一个选项的value
   

2. 修改模板中的select标签
   给select加上[(ngModel)]双向绑定，关联刚才定义的变量：

   <form class="form-group">
     <select class="form-control" [(ngModel)]="selectedPreset" (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>
   

3. 重置时更新变量值
   在你的重置按钮点击方法里，只需要把selectedPreset设回空字符串，下拉框就会自动回到第一个默认选项：

   resetApp() {
     // 先执行你重置应用数据的逻辑...
     
     // 重置下拉框到默认选项
     this.selectedPreset = '';
   }
   

方法二：直接操作DOM（快速临时方案） #

如果不想改太多现有代码，也可以通过ViewChild获取下拉框元素，直接设置selectedIndex：

1. 给select加模板引用变量
   在模板里给select加个标识，比如#presetSelect：

   <form class="form-group">
     <select #presetSelect 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>
   

2. 在组件类中获取元素并重置
   导入ViewChild和ElementRef，然后获取下拉框元素，重置时设置selectedIndex = 0：

   import { Component, ViewChild, ElementRef } from '@angular/core';
   
   @Component({
     // 你的组件元数据，比如selector、templateUrl等
   })
   export class YourComponent {
     @ViewChild('presetSelect') presetSelect!: ElementRef<HTMLSelectElement>;
   
     changePreset() {
       // 你原有的changePreset逻辑
     }
   
     resetApp() {
       // 先执行重置应用数据的逻辑...
       
       // 直接设置下拉框选中第一个选项
       this.presetSelect.nativeElement.selectedIndex = 0;
     }
   }
   

小提示 #

优先推荐方法一，因为Angular的设计理念就是数据驱动视图，尽量避免直接操作DOM；方法二更适合快速临时解决问题，但长期维护来说不如方法一优雅。

内容的提问来源于stack exchange，提问作者Hopper08