Angular使用变量动态获取对象属性实现ngClass绑定问题处理

问题根因 #

你遇到的报错本质是TypeScript的类型安全校验导致的：未声明索引签名的普通对象，默认不允许使用string类型的变量作为键来访问属性，TS无法确认你定义的val变量一定是item对象上存在的合法属性，因此会抛出类型错误，导致模板表达式无法正常执行。

解决方案 #

方案1：限定val的取值范围为item的合法键（推荐） #

直接将val的类型从通用string改为item对象的键联合类型，从类型层面保证val一定是item的合法属性：

// 组件代码
item = {"Financials":0,"Risk":3,"Issue":2,"Milestone":1};
// 限定val只能是item的4个属性名之一
val: keyof typeof item = "Financials";

getRAG(n:number):string{
  // 你的原有逻辑
  return 'myclass';
}

模板代码不需要修改，原有写法getRAG(item[val])可以正常运行，修改val = "Risk"也能正确读取对应属性值。

方案2：为item定义专属接口后限定类型（更适合正式项目） #

如果item的结构是固定的，可以先定义接口，再基于接口限定val类型，可维护性更高：

interface ScoreItem {
  Financials: number;
  Risk: number;
  Issue: number;
  Milestone: number;
}

// 组件代码
item: ScoreItem = {"Financials":0,"Risk":3,"Issue":2,"Milestone":1};
val: keyof ScoreItem = "Financials";

方案3：临时兼容写法 #

如果不想修改类型定义，可以直接在模板表达式里加类型断言，跳过类型校验：

<div>
  <i [ngClass]="getRAG(item[val as keyof typeof item])">
</div>

或者直接将item声明为任意string键都可访问的记录类型：

item: Record<string, number> = {"Financials":0,"Risk":3,"Issue":2,"Milestone":1};
val:string = "Financials";

这种写法下即使val不是item的现有属性也不会报错，会返回undefined，需要自行处理边界情况。

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