Angular双层*ngFor绑定索引时报Number类型无数字索引签名错误如何解决

错误原因 #

报错的核心是类型不匹配：你提供的JSON结构中，每个子项的total字段都是基础数字类型，并非二维数组。item.total[i][j]的写法相当于把数字当做数组用下标取值，自然会触发Number类型不存在数字参数索引签名的错误。

解决方案 #

根据你要把i、j和total结合绑定的需求，分两种常见场景处理：

场景1：需要将索引和total值组合后绑定 #

如果你只是需要把两个索引和total值整合为一个值传给itemValue，根据目标值类型选择对应写法：

• 组合为字符串（比如格式为分组索引-子项索引-数值）：

<!-- 属性绑定 -->
<div class="field-view" [itemValue]="`${i}-${j}-${item.total}`">
<!-- 插值显示 -->
<div class="value-view">
  {{ i }}-{{ j }}-{{ item.total }}
</div>

• 组合为对象（保留各个字段的原始类型）：

[itemValue]="{ groupIndex: i, itemIndex: j, total: item.total }"

• 数值运算（比如索引和total累加）：

[itemValue]="i + j + item.total"

场景2：确实需要通过索引取total的对应值 #

如果你的业务逻辑里total本身就是二维数组，需要取i行j列的值，那你需要先调整数据结构，将total字段改为二维数组格式，示例如下：

{
  "total": [[20000, 10000], [5000, 3000]],
  "itemId": "123",
  "category": "test"
}

调整后你的原有item.total[i][j]写法就可以正常运行。

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