如何从TypeScript数组填充HTML表单字段？数组赋值报错怎么解决？

错误原因 #

你报错的核心问题是把数组当成对象来操作了：

• this.nutrientGuis是数组类型，数组仅支持数字索引（如[0]、[1]）访问元素，不能直接用字符串（如"Vitamin A, IU"）作为键赋值，这就触发了"Cannot set properties of undefined"的错误。
• 你原本的代码试图给数组的字符串键赋值，完全不符合数组的使用规则。

解决步骤 #

1. 声明键值对对象存储映射关系 #

在组件里定义一个专门用于映射营养名称和含量的对象（比如命名为nutrientMap）：

// 初始化空对象，指定键为字符串类型，值为数字类型
nutrientMap: {[key: string]: number} = {};

2. 循环数组填充对象 #

修改循环代码，把数组元素转换为对象的键值对：

for (let nutrientGui of this.myFoodGui.nutrientGuis) {
  console.log("nutrientGui=", nutrientGui);
  // 以营养名称为键，含量为值存入对象
  this.nutrientMap[nutrientGui.name] = nutrientGui.amount;
}

3. 模板中从对象取值填充input #

在HTML模板里，根据input的name属性从nutrientMap中取值，还可以拼接源数据里的单位字段：

<!-- 示例：input的name与nutrientMap的键完全对应 -->
<input type="text" name="Vitamin A, IU" value="{{ nutrientMap['Vitamin A, IU'] }} IU">
<input type="text" name="totalFat" value="{{ nutrientMap['totalFat'] }} g">

额外提示 #

如果所有input的name都和数组里的name字段完全匹配，还可以通过动态绑定批量渲染表单元素，避免逐个硬编码。

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