Angular：通过字符串键绑定ngModel到对象成员及类型错误解决

错误原因 #

TypeScript无法正确推断user[item.value]的类型：由于fields数组的类型被自动推断为包含不同keyof customer值的联合类型，导致索引访问user[item.value]时，类型被收窄为never，触发类型不匹配错误。

可行解决方案 #

方案1：明确fields的类型定义（推荐）

在组件中给fields指定精确的映射类型，让TypeScript能正确识别字段键的类型：

// 定义字段映射类型
type CustomerFieldMapping = {
  name: string;
  value: keyof customer;
};

// 声明fields时使用该类型
fields: CustomerFieldMapping[] = [
  {name: "Vorname", value: "FirstName"},
  {name: "Nachname", value: "LastName"},
  {name: "Handynummer", value: "Phone"},
  // 其他字段...
];

修改后模板无需改动，TypeScript会正确推断user[item.value]的类型，错误自动消失。

方案2：通过辅助方法处理属性访问

如果方案1无法解决，可在组件中编写辅助方法来封装属性的获取与设置，明确类型约束：

// 获取用户属性
getUserProp(key: keyof customer) {
  return this.user[key];
}

// 设置用户属性
setUserProp(key: keyof customer, value: any) {
  this.user[key] = value;
}

模板中拆分双向绑定，使用方法替代直接索引：

<mat-form-field *ngFor="let item of fields;">
  <mat-label>{{item.name}}</mat-label>
  <input matInput 
    [ngModel]="getUserProp(item.value)" 
    (ngModelChange)="setUserProp(item.value, $event)">
</mat-form-field>

方案3：临时绕过类型检查（不推荐长期使用）

若需快速调试，可使用Angular模板中的$any()断言忽略类型检查：

<mat-form-field *ngFor="let item of fields;">
  <mat-label>{{item.name}}</mat-label>
  <input matInput [(ngModel)]="$any(user)[item.value]">
</mat-form-field>

此方法会丢失类型安全，仅适合临时场景。

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