使用*ngFor时字符串联合字面量类型转为string致索引报错

在Angular开发中，用*ngFor结合keyvalue管道遍历字符串联合字面量类型的对象时，会遇到类型不匹配的错误：

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FruitCollection'.

问题重现 #

组件代码（apple-banana-component.ts）：

import { Component, OnInit } from '@angular/core';

const Fruits = ["apple", "banana"] as const;
type Fruit = typeof Fruits[number]; // "apple" | "banana"
type FruitCollection = { [fruit in Fruit]: number }; // {apple: number, banana: number}

@Component({
    selector: 'app-apple-banana',
    templateUrl: './apple-banana.component.html'
})
export class AppleBananaComponent implements OnInit {
    fruitBasket: FruitCollection = {
        apple: 10,
        banana: 10
    }
    fruitEaten: FruitCollection = {
        apple: 0,
        banana: 0
    }
    constructor() { }
    ngOnInit(): void { }
    eatFruit(fruit: Fruit) {
        this.fruitEaten[fruit]++;
        this.fruitBasket[fruit]--;
    }
}

模板代码（apple-banana-component.html）：

<div>
You have eaten {{fruitEaten['apple']}} apples and {{fruitEaten['banana']}} bananas. <!-- works -->

<div *ngFor="let fruit of fruitBasket | keyvalue">
    {{fruit.key}}: 
    {{fruit.value}} in basket, 
    {{fruitEaten[fruit.key]}}  <!-- ERROR: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'FruitCollection'. -->    
    eaten.
    <button (click)="eatFruit($any(fruit.key))">eat {{fruit.key}}</button>
</div>
</div>

核心原因 #

keyvalue管道返回的KeyValue对象中，key的类型是string，而我们定义的FruitCollection只接受"apple"|"banana"这两个特定字符串作为索引，TypeScript的严格类型检查会拒绝这种不匹配。另外，Angular模板不支持直接写TypeScript的类型断言语法（比如as Fruit），这就是为什么你尝试的几种写法都报错。

至于$any(fruit.key)在eatFruit里能用但索引不行：eatFruit的参数是Fruit类型，$any把fruit.key转成any后，TypeScript允许any赋值给Fruit；但索引时，用any去索引FruitCollection，因为该类型没有any的索引签名，所以还是会触发错误。

可行解决方案 #

方案1：在组件中添加类型安全的获取方法

把类型断言逻辑放在组件的TypeScript代码里，模板只调用方法：

// 在AppleBananaComponent类中添加
getEatenCount(fruitKey: string): number {
  // 这里的类型断言在TS代码中是合法的
  return this.fruitEaten[fruitKey as Fruit];
}

模板中修改为：

<div *ngFor="let fruit of fruitBasket | keyvalue">
    {{fruit.key}}: 
    {{fruit.value}} in basket, 
    {{getEatenCount(fruit.key)}} eaten.
    <button (click)="eatFruit($any(fruit.key))">eat {{fruit.key}}</button>
</div>

方案2：直接遍历联合类型数组（推荐）

不用keyvalue管道，提前定义好联合类型的数组，直接遍历：

// 在AppleBananaComponent类中添加
fruits: Fruit[] = Fruits; // 继承Fruits的const类型，自动推断为"apple"|"banana"数组

模板修改为：

<div *ngFor="let fruit of fruits">
    {{fruit}}: 
    {{fruitBasket[fruit]}} in basket, 
    {{fruitEaten[fruit]}} eaten.
    <button (click)="eatFruit(fruit)">eat {{fruit}}</button>
</div>

这种方式完全避免了类型不匹配的问题，因为遍历的元素本身就是Fruit类型，索引时类型完全匹配，还保留了TypeScript的类型检查优势。

方案3：添加字符串索引签名（不推荐）

如果一定要用keyvalue管道，可以给FruitCollection添加字符串索引签名，但会失去类型安全：

type FruitCollection = { 
  [fruit in Fruit]: number;
  [key: string]: number; // 添加字符串索引，允许任意string作为键
};

这样fruitEaten[fruit.key]不会报错，但代价是TypeScript不再检查非法键（比如fruitEaten['orange']也不会报错），不推荐使用。

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