Angular 5中如何通过响应式表单为MatSelect设置服务返回的初始值？

嘿，我之前在项目里也踩过这个坑！别慌，咱们从几个常见的排查点入手，一步步解决～

1. 确保表单控件赋值与MatSelect选项的value类型完全匹配 #

这是最容易踩的坑！你从服务拿到的值，必须和MatSelect选项里绑定的[value]类型完全一致，不然表单控件虽然有值，但MatSelect找不到对应的选项，自然显示不出来。

举两个常见场景：

• 如果你的MatSelect选项绑定的是ID（数字/字符串）：

  <mat-select formControlName="department">
    <mat-option *ngFor="let dept of departments" [value]="dept.id">
      {{ dept.name }}
    </mat-option>
  </mat-select>
  

  那你从服务拿到选中的部门ID后，直接给表单控件赋值就行，注意类型要匹配（比如别把数字ID转成字符串）：

  // 组件代码
  import { FormBuilder, FormGroup, Validators } from '@angular/forms';
  
  export class MyComponent {
    myForm: FormGroup;
    departments: any[] = [];
  
    constructor(private fb: FormBuilder, private myService: MyService) {
      // 初始化表单
      this.myForm = this.fb.group({
        department: ['', Validators.required]
      });
    }
  
    ngOnInit() {
      // 从服务获取选中值并赋值
      this.myService.getUserSelectedDept().subscribe(selectedDeptId => {
        this.myForm.get('department')?.setValue(selectedDeptId);
        // 也可以用patchValue批量赋值
        // this.myForm.patchValue({ department: selectedDeptId });
      });
    }
  }
  

• 如果你的MatSelect选项绑定的是整个对象：
  这时候光赋值对象不行，因为Angular默认是引用比较，服务返回的对象和你选项数组里的对象引用不同，MatSelect认不出来。必须用compareWith函数来告诉Angular怎么判断两个对象是同一个选项：

  <mat-select formControlName="department" [compareWith]="compareDepartments">
    <mat-option *ngFor="let dept of departments" [value]="dept">
      {{ dept.name }}
    </mat-option>
  </mat-select>
  

  然后在组件里定义比较函数：

  compareDepartments(dept1: any, dept2: any): boolean {
    // 用唯一标识（比如id）来判断两个对象是否为同一选项
    return dept1 && dept2 ? dept1.id === dept2.id : dept1 === dept2;
  }
  

  这时候再给表单控件赋值服务返回的对象就没问题了：

  this.myService.getUserSelectedDept().subscribe(selectedDept => {
    this.myForm.get('department')?.setValue(selectedDept);
  });
  

2. 确保选项数据加载完成后再赋值 #

如果你的MatSelect选项列表也是从服务获取的，一定要等选项加载完成后，再给表单控件赋值！不然选项还没渲染，赋值了也显示不出来。

可以用forkJoin来同时等待选项和选中值的请求完成：

import { forkJoin } from 'rxjs';

ngOnInit() {
  forkJoin([
    this.myService.getDepartments(), // 获取选项列表
    this.myService.getUserSelectedDept() // 获取选中值
  ]).subscribe(([departments, selectedDept]) => {
    this.departments = departments;
    // 先把选项赋值，再设置表单控件的值
    this.myForm.get('department')?.setValue(selectedDept);
  });
}

3. 排查变更检测问题 #

有时候异步赋值后，Angular的变更检测没触发，导致页面没更新。这时候可以手动触发变更检测：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

this.myService.getUserSelectedDept().subscribe(selectedDeptId => {
  this.myForm.get('department')?.setValue(selectedDeptId);
  // 手动触发变更检测
  this.cdr.detectChanges();
});

最后再检查这些细节 #

• 确保formControlName和表单控件的名称完全一致，别打错字！
• 检查服务返回的值是不是null或者undefined，如果是的话可以设置默认值。

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