为什么我的Angular函数无法收集ngForm用户输入且触发应用崩溃

问题原因排查 #

• 核心语法错误：第二个循环中data.keys[i]写法错误。data是存储表单值的普通对象，不存在名为keys的自有属性，因此data.keys为undefined，访问undefined[i]会直接抛出异常，导致页面崩溃。你需要访问的是存在this.keys数组里的键名对应的属性值，应该改为data[this.keys[i]]。
• 冗余调用隐含风险：第一个循环中每轮迭代都重复执行Object.keys(data)，如果num值较大、或者data的键数量少于num时，会出现赋值为undefined的情况，极端情况下也会引发后续逻辑异常。建议先把Object.keys(data)的结果提前存为临时变量。
• 类型不安全风险：inputBoxes声明为any类型，如果下拉选择未完成就触发提交，parseInt(this.inputBoxes)会返回NaN，后续new Array(num)、循环判断idx < num都会出现逻辑异常。

修复后的代码 #

component.ts 修正版 #

// 声明时直接初始化空数组，即可实现「先声明后续赋值」的需求，无需额外处理
public inputBoxes?: number; 
private keys: string[] = [];

// 补充下拉框的change事件处理，确保inputBoxes是数字类型
updateInputBoxes(event: Event) {
  const selectEle = event.target as HTMLSelectElement;
  this.inputBoxes = parseInt(selectEle.value, 10);
}

onClickSubmit(data: Record<string, string>) {
  // 先做边界判断，避免非法值进入逻辑
  if (!this.inputBoxes || isNaN(this.inputBoxes)) return;
  const num = this.inputBoxes;
  // 提前获取所有键，避免重复调用
  const dataKeys = Object.keys(data);
  this.keys = [];

  for (let idx = 0; idx < num; idx++){
    // 做边界判断，避免data的键数量不足
    if (dataKeys[idx]) {
      this.keys.push(dataKeys[idx]);
    }
  }

  for (let i = 0; i < this.keys.length; i++){
    // 用方括号访问动态属性，而不是错误的data.keys
    console.log(data[this.keys[i]]);
  }
  
  // 如果要直接得到输入值的数组，更简单的写法：
  const wordArray = Object.values(data);
  console.log('整理好的输入词数组：', wordArray);
}

TypeScript 先声明数组后续实例化的实现方式 #

如果要声明类的全局数组属性，后续再赋值，有两种常用方式：

1. 声明时直接初始化空数组（最推荐，类型安全）：

private keys: string[] = [];
// 后续直接push、重新赋值都可以

2. 声明为可选数组类型，后续再赋值：

private keys?: string[];
// 后续实例化：this.keys = ['a', 'b', 'c']
// 注意访问时要先判断是否存在，避免undefined异常

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