Angular & TypeScript：如何将ngModel绑定到对象的动态键

这个错误的核心是TypeScript在Angular模板中无法精准推断driver[ovrKey]的类型：
你定义的ovrKeys是keyof WeeklyDriver类型，但TypeScript不知道这些键对应的属性值都是number——它只会认为这些键可能对应WeeklyDriver里的任意类型，双向绑定[(ngModel)]时，类型推断就会出现冲突，最终抛出'any' is not assignable to type 'never'。

下面是几种可行的解决方法：

方法1：给ovrKeys定义更精确的类型 #

直接限定ovrKeys的元素为那些值类型明确是number的键，而非宽泛的keyof WeeklyDriver：

// 先定义仅包含目标键的联合类型
type WeeklyOvrNumberKey = 'SunOvrVal' | 'MonOvrVal' | 'TueOvrVal' | 'WedOvrVal' | 'ThuOvrVal' | 'FriOvrVal' | 'SatOvrVal';

// 用这个精确类型声明ovrKeys
public ovrKeys: WeeklyOvrNumberKey[] = [
    'SunOvrVal',
    'MonOvrVal',
    'TueOvrVal',
    'WedOvrVal',
    'ThuOvrVal',
    'FriOvrVal',
    'SatOvrVal'
];

这样TypeScript能明确知道这些键对应的属性是number，模板里的双向绑定就能正常推断类型。

方法2：用组件方法做类型安全的读写（推荐） #

如果不想重复定义键的联合类型，可以在组件里写两个辅助方法，明确读写的类型：

// 确保WeeklyDriver的类型定义中，目标键确实是number类型
interface WeeklyDriver {
  SunOvrVal: number;
  MonOvrVal: number;
  TueOvrVal: number;
  WedOvrVal: number;
  ThuOvrVal: number;
  FriOvrVal: number;
  SatOvrVal: number;
  // 其他属性...
}

// 组件中的辅助方法
getOvrValue(driver: WeeklyDriver, key: keyof WeeklyDriver): number {
  const allowedKeys: (keyof WeeklyDriver)[] = this.ovrKeys;
  if (allowedKeys.includes(key) && typeof driver[key] === 'number') {
    return driver[key] as number;
  }
  return 0;
}

setOvrValue(driver: WeeklyDriver, key: keyof WeeklyDriver, value: number): void {
  const allowedKeys: (keyof WeeklyDriver)[] = this.ovrKeys;
  if (allowedKeys.includes(key)) {
    driver[key] = value as WeeklyDriver[keyof WeeklyDriver];
  }
}

然后模板里拆分双向绑定，用单向绑定+事件回调：

<tr *ngFor="let driver of drivers">
  <td *ngFor="let ovrKey of ovrKeys">
    <input
      type="number"
      min="0"
      step="1"
      [ngModel]="getOvrValue(driver, ovrKey)"
      (ngModelChange)="setOvrValue(driver, ovrKey, $event)"
      placeholder="New value"
    />
  </td>
</tr>

方法3：模板中临时用$any()断言（不推荐） #

如果只是临时解决问题，可以用Angular模板的$any()绕过类型检查，但这会失去TypeScript的类型保护：

[(ngModel)]="$any(driver)[ovrKey]"

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