Angular8中如何将mat-option绑定到FormControl？

我仔细看了你的代码，发现有两个核心问题导致绑定失效，咱们一步步来修复：

问题分析 #

1. 单选/多选模式与FormControl值类型不匹配：你给FormControl的初始值是整个选项数组，但默认mat-select是单选组件，它期望的初始值是单个选项对象，而不是数组——类型不匹配自然会导致绑定失效。如果是想实现多选，必须给mat-select添加multiple属性才行。
2. 选项数组未与对应控件关联：当前模板里所有下拉框都循环同一个options数组，但你的第二个控件本来应该用secondOptions，没有做到动态匹配。

修复方案 #

第一步：调整TS代码，建立控件与选项的映射 #

先创建一个映射对象，让每个控件key对应对应的选项数组，同时根据需求设置正确的初始值（单选设单个对象，多选设数组）：

import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  options = [{ type: "first", parameter: "first" }, { type: "first", parameter: "first" }];
  secondOptions = [{ type: "second", parameter: "second" }, { type: "second", parameter: "second" }];
  
  // 建立控件名到对应选项数组的映射
  controlOptionsMap = {
    first: this.options,
    second: this.secondOptions
  };

  myForm = new FormGroup({
    // 多选示例：初始值是数组，对应multiple模式
    first: new FormControl([this.options[0]]),
    // 单选示例：初始值是单个选项对象
    second: new FormControl(this.secondOptions[0])
  });
}

第二步：修改HTML模板，动态匹配选项与控件 #

在模板里通过控件的key从映射中获取对应选项，同时根据需求添加multiple属性：

<form [formGroup]="myForm">
  <ng-container *ngFor="let control of myForm.controls | keyvalue">
    <mat-form-field>
      <!-- 给需要多选的控件添加multiple属性，这里示例中first控件是多选 -->
      <mat-select formControlName="{{control.key}}" [multiple]="control.key === 'first'">
        <!-- 通过control.key拿到对应控件的选项数组 -->
        <mat-option *ngFor="let option of controlOptionsMap[control.key]" [value]="option">
          {{option.parameter}}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </ng-container>
</form>

关键要点说明 #

• 类型匹配：单选模式下，FormControl的初始值必须和mat-option的[value]类型一致（都是单个对象）；多选模式下则是数组，同时必须开启multiple属性。
• 动态选项匹配：通过controlOptionsMap让每个下拉框能拿到自己对应的选项数组，解决了你之前所有下拉框用同一组选项的问题。
• 选中项匹配：Angular会通过对象引用判断选中项，如果你的选项是从后端获取的，记得确保初始值的对象引用和选项数组中的对象一致，或者自定义compareWith函数来判断匹配逻辑（比如根据parameter字段）。

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