Angular Mat-Select初始化赋值后选中项显示异常求助

问题背景 #

需求：在<mat-option>中显示额外信息，但用户选中选项后，选中状态下不显示该额外信息，因此使用<mat-select-trigger>实现此效果。
问题：创建表单后设置Mat-Select的初始值时，选中项无法正确显示对应的viewValue。
补充说明：常规方法是通过过滤值来更新selected变量，但由于该下拉框是自定义组件，无法直接传递值实现此操作。

相关代码 #

HTML代码 #

<form [formGroup]="issueFieldsForm">
  <mat-form-field appearance="fill" >
    <mat-label> Select</mat-label>
    <mat-select (selectionChange)="onchange($event)" formControlName="testDropDown">
      <mat-select-trigger >{{selected}}</mat-select-trigger>
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
        <span>test</span>
      </mat-option>
    </mat-select>
  </mat-form-field>
</form>

Component.ts代码 #

export class SelectOverviewExample implements OnInit{

  public selected: any;
  public issueFieldsForm: FormGroup;

  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'},
  ];

  public onchange(event:any){
    console.log(event);
    this.selected = this.foods.filter((obj)=> obj.value == event.value)[0].viewValue;
    console.log(this.selected)
  }
  constructor(private formBuilder: FormBuilder){

  }
  ngOnInit(): void {
      this.issueFieldsForm = new FormGroup<any | any>({testDropDown : new FormControl(null)})      
      this.issueFieldsForm.controls.testDropDown.setValue('tacos-2');
    }
}

解决方案 #

方法1：初始化时同步设置selected值 #

在ngOnInit中设置初始值后，直接根据选中的value找到对应的viewValue赋值给selected：

ngOnInit(): void {
  this.issueFieldsForm = new FormGroup<any>({
    testDropDown: new FormControl(null)
  });
  const initialValue = 'tacos-2';
  this.issueFieldsForm.controls.testDropDown.setValue(initialValue);
  // 同步设置selected
  const initialFood = this.foods.find(food => food.value === initialValue);
  if (initialFood) {
    this.selected = initialFood.viewValue;
  }
}

方法2：监听表单控件值变化自动更新 #

如果担心后续值变更（比如表单重置），可以监听testDropDown的valueChanges来自动更新selected，这样无需依赖selectionChange事件：

ngOnInit(): void {
  this.issueFieldsForm = new FormGroup<any>({
    testDropDown: new FormControl(null)
  });
  
  // 监听值变化
  this.issueFieldsForm.get('testDropDown')?.valueChanges.subscribe(value => {
    const food = this.foods.find(f => f.value === value);
    this.selected = food ? food.viewValue : '';
  });

  // 设置初始值
  this.issueFieldsForm.controls.testDropDown.setValue('tacos-2');
}

方法3：自定义组件场景下的处理 #

如果是自定义组件，无法直接外部传递值更新selected，可以：

1. 让自定义组件实现ControlValueAccessor接口，在writeValue方法中处理初始值，找到对应的viewValue并设置内部的selected变量；
2. 在自定义组件内部监听自身表单控件的valueChanges，自动同步selected值，确保初始值和后续变更都能正确显示。

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