如何在Angular 5中动态设置下拉选择框的选中值

嘿，我来帮你搞定这个下拉框选中值的设置问题！先从你的代码里的小细节说起，再给你几种靠谱的实现方法：

第一步：修正HTML里的语法问题 #

你的mat-select标签里name属性和formControl指令的写法有问题，两个属性得分开写；另外mat-option的value推荐用属性绑定，更符合Angular的最佳实践。修正后的HTML代码如下：

<mat-form-field class="col-sm-3">
  <mat-select placeholder="State" name="state" [formControl]="stateFormControl" required>
    <mat-option *ngFor="let state of states" [value]="state.key">{{state.name}}</mat-option>
  </mat-select>
  <mat-error *ngIf="stateFormControl.hasError('required')">State is required</mat-error>
</mat-form-field>

第二步：在TypeScript中设置选中值 #

根据你的数据加载情况，有两种常见的处理方式：

1. 同步数据直接初始化 #

如果你的states是静态数据（直接定义在组件里的数组），可以在初始化FormControl的时候直接传入默认选中的key值：

// 示例静态states数组
states = [
  { key: 'NY', name: 'New York' },
  { key: 'CA', name: 'California' },
  { key: 'TX', name: 'Texas' }
];

// 初始化时直接设置选中值，比如选中California
stateFormControl = new FormControl('CA', Validators.required);

2. 异步数据（比如从API获取）后设置 #

如果states是通过接口异步获取的，一定要等数据加载完成后再设置选中值，不然会因为states还没初始化导致设置无效。可以在数据订阅回调里用setValue或者patchValue方法：

stateFormControl = new FormControl('', Validators.required);

ngOnInit() {
  // 模拟从API获取states数据
  this.stateService.getStates().subscribe(states => {
    this.states = states;
    // 设置你需要选中的state的key
    this.stateFormControl.setValue('TX');
    // 用patchValue效果也一样，单个控件场景下两者无区别
    // this.stateFormControl.patchValue('TX');
  });
}

小提醒 #

• 确保你设置的key值和mat-option的[value]完全匹配，大小写也要一致哦！
• setValue和patchValue在单个FormControl场景下效果一致，要是用在FormGroup里，patchValue可以只更新部分字段，更灵活。

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