Angular中NgFor遍历可变键对象遇类型错误的解决方法

“Headers”（headers: any;）是通过Object.keys从data.items[0]中提取的键。

尝试用*ngFor遍历data.items生成表格时遇到问题，目标是每行对应items中的一个对象，每列对应headers中的键，输入框显示对应属性值，但两种写法都报错：

• 使用item.header时：

类型“{ name: string; alias: string[]; qty: number; price: number; total: number; }”上不存在属性“header”

• 使用item[header]时：

元素隐式拥有“any”类型，因为“any”类型的表达式不能用于索引类型“{ name: string; alias: string[]; qty: number; price: number; total: number; }”

相关代码 #

对象定义 #

private itemData: sale = {
  type: '',
  data: { date: ' ', InvoiceNo: ' ', tax: ' ' },
  total: { semitotal: 0, grandtotal: 0 },
  items: [
    { name: 'item 1', alias: ['01a'], qty: 0, price: 0, total: 0 },
    { name: 'item 2', alias: ['02a'], qty: 5, price: 250, total: 0 },
    { name: 'item 3', alias: ['03a'], qty: 6, price: 350, total: 0 },
    { name: 'item 4', alias: ['04a'], qty: 1, price: 150, total: 0 },
  ],
  params: {},
};

Angular HTML代码 #

<tbody>
    <tr *ngFor="let item of itemData.items" class="table-data" >
        <td *ngFor="let header of headers"> 
            <input type="text" [value]="item.header">  <!-- 问题所在 -->
        </td>
    </tr>
</tbody>

1. 修正类型定义 #

先给items中的对象定义明确类型，再给headers指定合法键类型，消除TypeScript类型错误：

在组件类中添加：

// 定义单个商品的类型
type Item = {
  name: string;
  alias: string[];
  qty: number;
  price: number;
  total: number;
};

// 给headers指定正确类型，确保是Item的键集合
headers: Array<keyof Item> = Object.keys(this.itemData.items[0]) as Array<keyof Item>;

2. 模板中使用正确的索引访问 #

把模板里的item.header改成item[header]，因为header是动态键名，必须用方括号索引访问：

<tbody>
    <tr *ngFor="let item of itemData.items" class="table-data" >
        <td *ngFor="let header of headers"> 
            <input type="text" [value]="item[header]">
        </td>
    </tr>
</tbody>

3. 优化数组属性显示（可选） #

因为alias是数组类型，直接显示会是[01a]格式，若需要更友好的展示，可以加判断处理：

<input type="text" [value]="Array.isArray(item[header]) ? item[header].join(', ') : item[header]">

这样数组会以逗号分隔的字符串形式展示，比如01a。

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