键值管道给出错误的返回类型

Question

我正在 KeyValuePipe 文档中查看此重载：

@param input: Record<K, V> | ReadonlyMap<K, V>
@param compareFn: ((a: KeyValue<K, V>, b: KeyValue<K, V>) => number) | null | undefined
@returns KeyValue<K, V>[]

我的代码：

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

lookups.teams

的类型为

Record<number, string | undefined>

。所以根据文档，我预计

option

是

KeyValue<number, string | undefined>

。然而事实证明是

KeyValue<string, string | undefined>

我需要

option.key

成为 ngModel 才能工作的数字。我该如何解决它？

Answer 1

我对过载定义感到困惑。如果输入是Record类型，则输出的key始终是字符串。

来自来源：

  /*
   * NOTE: when the `input` value is a simple Record<K, V> object, the keys are extracted with
   * Object.keys(). This means that even if the `input` type is Record<number, V> the keys are
   * compared/returned as `string`s.
   */

Answer 2

Record本质上是Javascript中的一个对象，Javascript中的对象键总是被强制转换为字符串。

例如：

const obj: Record<number, string> = { 1: 'one', 2: 'two' };
console.log(Object.keys(obj)); // ['1', '2']

keyvalue管道依赖于Object.entries()或内部类似的机制，它以字符串形式返回键，即使它们最初是数字。

为了确保 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>