Angular KeyValuePipe返回错误类型：number键转为string的修复方案

问题原因 #

JavaScript 对象的键本质上只能是字符串或 Symbol，即便用 TypeScript 的 Record<number, string | undefined> 做类型约束，运行时对象的键依然会被转为字符串。KeyValuePipe 处理普通对象时会直接读取这些字符串键，导致返回的 KeyValue 对象的 key 类型变成 string，无法和 number 类型的 item.teamId 绑定。

修复方案 #

方案1：模板内直接转换键类型 #

最简单的方式是在模板中用一元加号（+）将字符串键转为数字：

<mat-select [(ngModel)]="item.teamId">
  <mat-option *ngFor="let option of lookups.teams | keyvalue" [value]="+option.key">
    {{ option.value }}
  </mat-option>
</mat-select>

这种方式适合单次使用场景，无需额外组件代码。

方案2：将对象转为 Map 保留键类型 #

如果希望从根源上保留键的 number 类型，可以把 Record<number, string | undefined> 转为 Map<number, string | undefined>——Map 支持非字符串类型的键，KeyValuePipe 处理 Map 时会保留原始键类型：

在组件类中预处理数据：

// 假设 lookups.teams 是从接口或其他渠道获取的 Record 类型
this.lookups.teams = new Map(
  Object.entries(this.lookups.teams).map(([key, value]) => [Number(key), value])
);

之后模板中的 option.key 会直接是 number 类型，无需额外转换：

<mat-select [(ngModel)]="item.teamId">
  <mat-option *ngFor="let option of lookups.teams | keyvalue" [value]="option.key">
    {{ option.value }}
  </mat-option>
</mat-select>

这种方式适合需要多次复用该数据、且要求类型严格匹配的场景。

方案3：自定义强类型 KeyValuePipe #

如果项目中频繁遇到类似场景，可以自定义一个管道，针对 Record<number, V> 类型做特殊处理，确保返回的键为 number 类型：

import { Pipe, PipeTransform } from '@angular/core';
import { KeyValue } from '@angular/common';

@Pipe({ name: 'numberKeyvalue' })
export class NumberKeyvaluePipe implements PipeTransform {
  transform<K extends number, V>(input: Record<K, V>): KeyValue<K, V>[];
  transform<K, V>(input: Record<K, V> | ReadonlyMap<K, V>, compareFn?: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null): KeyValue<K, V>[];
  transform(input: any, compareFn?: any): any[] {
    if (typeof input === 'object' && !(input instanceof Map)) {
      return Object.entries(input).map(([key, value]) => ({
        key: Number(key) as any,
        value
      }));
    }
    // 复用原生 KeyValuePipe 逻辑处理 Map
    const entries = input instanceof Map ? Array.from(input.entries()) : Object.entries(input);
    const keyValues = entries.map(([k, v]) => ({ key: k, value: v }));
    return compareFn ? keyValues.sort(compareFn) : keyValues;
  }
}

然后在模板中使用自定义管道：

<mat-select [(ngModel)]="item.teamId">
  <mat-option *ngFor="let option of lookups.teams | numberKeyvalue" [value]="option.key">
    {{ option.value }}
  </mat-option>
</mat-select>

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