Angular实现mat-select绑定枚举选项并保存选中值的问题

云原生阿岚

2026-7-23

解决方案

主问题：绑定选中值到模型

你的核心问题是mat-select未与模型的type属性做双向绑定，导致选中值无法同步到this.data中，最终返回后type为undefined。按以下步骤修改：

1. 修改对话框模板的`mat-select`

给mat-select添加双向绑定，关联传入的data.type：

<div>
    <mat-label>Type</mat-label>
    <!-- 绑定到data的type属性，实现选中值自动同步 -->
    <mat-select [(ngModel)]="data.type">
        <mat-option *ngFor="let type of contactPersonMap | keyvalue" [value]="type.key">
            {{type.value}}
        </mat-option>
    </mat-select>
</div>

2. 优化枚举映射的定义

不要在方法内重复创建Map，将其定义为组件类属性，既避免重复渲染，也能规避隐式any错误：

// 直接在组件类中定义属性，替代原getKeys()方法
contactPersonMap = new Map<ContactPersonType, string>([
  [ContactPersonType.Invoicing, 'Invoicing'],
  [ContactPersonType.SignWorkingHours, 'Sign month reports']
]);

3. 确保枚举类型定义规范

若ContactPersonType枚举存在隐式any问题，需明确枚举类型（示例）：

// 字符串枚举（后端若接收字符串则用这个）
export enum ContactPersonType {
  Invoicing = 'Invoicing',
  SignWorkingHours = 'SignWorkingHours'
}

// 或数字枚举（后端若接收数字则用这个）
export enum ContactPersonType {
  Invoicing,
  SignWorkingHours
}

完成以上修改后，选中下拉选项时，值会自动同步到this.data.type，点击add()关闭对话框后，返回的result.type即可正常获取选中值。

附带问题：选中后显示为空的原因

你之前的写法存在两个关键错误：

绑定位置错误：[(ngModel)]应绑定在mat-select上，而非单个mat-option。mat-option的[value]仅用来指定该选项对应的值，mat-select的ngModel才是存储选中值的容器。
变量名冲突：你使用了#type="ngModel"，而循环变量也是let type，导致模板变量名冲突，Angular无法正确识别选中状态，因此显示为空。