Angular 6中Angular Material mat-select数据绑定失效求助

我来帮你排查这个mat-select多选框预填充不生效的问题，结合你用的Angular 6和Angular Material，大概率是以下几个细节没处理对，咱们一步步来解决：

1. 核心问题：数据类型不匹配 #

你的mat-option绑定的value是permission.name（字符串类型），但如果data.permissions不是纯字符串数组，就会导致无法匹配选中项。比如如果后端返回的角色权限是对象数组（像[{id: 1, name: 'view_users'}, ...]），直接赋值给data.permissions是不行的。

解决办法：
把获取到的角色权限映射为字符串数组：

// 假设从API拿到的角色数据是role对象
this.data.permissions = role.permissions.map(permission => permission.name);

2. 确保FormsModule已导入 #

因为你用了[(ngModel)]，必须在当前组件所属的模块中导入FormsModule，否则ngModel绑定根本不会生效：

// 比如你的RolesModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms'; // 必须导入这个
import { MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';

@NgModule({
  imports: [
    CommonModule,
    FormsModule, // 加在这里
    MatSelectModule,
    MatFormFieldModule
  ],
  declarations: [YourRoleEditComponent]
})
export class RolesModule { }

3. 异步数据加载时机问题 #

如果data.permissions和data.allPermissions是从API异步获取的，可能mat-select渲染时数据还没加载完成，导致无法预填充。

解决办法：
在mat-form-field上添加*ngIf确保数据就绪后再渲染：

<mat-form-field class="form" floatPlaceholder="never" shouldPlaceholderFloat="false" 
                *ngIf="data.permissions && data.allPermissions">
  <mat-select [(ngModel)] = "data.permissions" [ngModelOptions]="{standalone: true}" multiple>
    <mat-option *ngFor="let permission of data.allPermissions" [value]="permission.name">
      {{permission.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

4. 检查对话框数据传递（如果用MatDialog） #

如果是点击编辑按钮后打开MatDialog弹窗，要确保传递给对话框的data.permissions是正确的字符串数组。比如打开对话框时：

const dialogRef = this.dialog.open(RoleEditDialogComponent, {
  data: {
    permissions: this.data.permissions, // 确保这里是字符串数组
    allPermissions: this.data.allPermissions
  }
});

并且在对话框组件中正确接收数据：

import { MAT_DIALOG_DATA } from '@angular/material/dialog';

constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }

先从数据类型匹配这个点排查，这是最常见的原因，然后依次检查模块导入和加载时机，应该就能解决预填充失效的问题了。

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