Angular模板用row[col]取值时报字符串无法索引Object类型怎么解决

这个报错是TypeScript的类型检查触发的：

• 你未给food数组的元素定义明确类型，TypeScript默认推导的类型不支持用任意字符串作为索引访问属性
• headers默认被推导为string[]类型，TypeScript无法确认数组中的每个字符串都是food对象上存在的合法属性名
• 额外注意你的代码里存在两个笔误：①声明的变量是header，实际使用的是headers；②ngOnInit末尾多了多余的});符号

下面给三种可选方案，你可以根据场景选择： #

方案1：规范类型定义（推荐） #

先定义数据结构的接口，从根源上解决类型检查问题，适合长期维护的项目：

1. 组件内先定义FoodItem接口：

interface FoodItem {
  Project_title: string;
  Benefit: boolean;
  Completion_date: string;
  Project_description: number;
  Project_cost: string;
  Accomplishments: string;
  help_needed: string;
  Project_leader: string;
  Project_Manager: string;
  Savings: string;
  complete_status: string;
  // 如果后续可能扩展字段，可额外加索引签名：[key: string]: string | number | boolean
}

2. 给food和headers声明对应类型，修正笔误：

export class FirstComponent implements OnInit {
  // 修正变量名，声明正确类型
  public headers: Array<keyof FoodItem>;
  // 给food声明类型
  public food: FoodItem[] = [{
    Project_title: 'Avocado',
    Benefit: true,
    Completion_date:'01/10/2022',
    Project_description:160,
    Project_cost:'some long text some long text some long text',
    Accomplishments:'something',
    help_needed:'Yes',
    Project_leader:'XYZ',
    Project_Manager:'ABC',
    Savings:'Some very long text Some very long text Some very long text Some very long text Some very long text Some very long text',
    complete_status:'Completed'
  }]
  constructor() { }

  ngOnInit(): void {
    this.headers = Object.keys(this.food[0]) as Array<keyof FoodItem>;
    // 删掉原来多余的 });
  }
}

调整后模板的原有写法不需要修改即可正常运行。 #

方案2：简化类型声明（适合快速开发） #

如果不需要严格的类型校验，直接给food添加索引签名即可，代码改动量极小：

export class FirstComponent implements OnInit {
  public headers: string[];
  // 给food加通用索引签名
  public food: {[key: string]: any}[] = [{
    // 原有数据保持不变
  }]
  constructor() { }

  ngOnInit(): void {
    this.headers = Object.keys(this.food[0]);
  }
}

方案3：模板临时绕过（仅适合临时调试） #

如果不想修改TS代码，可以直接在模板里用$any()方法绕过类型检查：

<tr *ngFor = "let row of food;">
  <td *ngFor ="let col of headers;">
      {{ $any(row)[col] }}
  </td>
</tr>

这个方案不推荐长期使用，会丢失类型校验能力。

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