Angular 5 TypeScript中如何向单个对象添加多组键值对？

嘿，我完全懂你现在的困扰！你想要的是一个包含多组键值对的单个对象，但现在代码每次循环都往数组里塞一个新的单键值对象，最后自然就变成了对象数组。咱们来一步步修正这个问题：

问题根源 #

你当前的代码this.rowData.push({ key+i : val+1 })，每次循环都会创建一个新的独立对象，然后把这个对象添加到rowData数组中。循环3次后，数组里就有3个各带一个键值对的对象，这和你的预期不符。

正确实现方式 #

我们需要先初始化一个空对象，然后在循环里不断给这个对象添加新的键值对，最后如果需要的话再把这个完整对象存入数组（如果rowData是数组的话）。

// 初始化一个空对象来存放所有键值对
const singleObj: { [key: string]: any } = {};

for (let i = 0; i < 3; i++) {
  // 使用方括号语法设置动态属性名，这是TypeScript/JS中动态键的标准写法
  singleObj[`key${i+1}`] = `val${i+1}`;
}

// 如果rowData是要存储这个对象的数组，只需要push一次即可
this.rowData = [singleObj]; 
// 或者如果rowData原本是空数组，就用this.rowData.push(singleObj);

// 最终singleObj的结构就是：{key1: "val1", key2: "val2", key3: "val3"}

关键知识点 #

• 动态属性名：当键名是动态生成的时候，必须使用**方括号[]**来访问或设置对象属性，而不是直接在对象字面量里写key+i（虽然对象字面量也支持计算属性{[key${i}]: value}，但你之前的错误是每次都新建对象push，而非给同一个对象加属性）。
• 区分对象和数组：你的目标是构建单个对象，所以要避免每次循环都创建新对象并推入数组的操作，应该始终操作同一个对象。

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