Angular表格通过行索引提交目标行数据取值为空的解决方法

问题场景 #

开发学生考勤模块时，从后端拉取数据后用ngFor遍历studentsInfo数组渲染表格行：状态值为'Y'的记录直接展示“已到课”，状态值为'N'的记录渲染“点击标记到课”按钮。当前需要实现的逻辑是：针对带按钮的单条记录，依靠ngFor生成的行索引定位对应行完成提交。项目已经定义了SearchForm响应式表单实例，后端接口仅要求提交id和roll_no两个字段，但目前点击按钮触发提交时，获取到的表单值为空，功能无法正常运行。

根因定位 #

• 响应式表单绑定错误：将formControlName直接绑定在仅做展示的<span>标签上，Angular响应式表单要求表单控件必须绑定在可承载输入值的交互元素上，纯文本span本身没有值存储能力，根本不会把列表里的学生id、Roll_no同步到SearchForm的控件中。另外绑定在span上的ngDefaultContro存在拼写错误，就算本意是把非交互元素转成表单控件，拼写错误也会导致功能完全失效。
• 模板事件绑定语法错误：按钮的点击事件写成了((click))，多嵌套了一层括号，Angular的事件绑定标准语法是单括号(click)，语法错误会导致事件根本无法正常触发。
• 表单取值逻辑不匹配：单个全局SearchForm实例要承载ngFor循环出来的N行学生数据，没有做控件拆分的情况下，控件值会被循环覆盖，根本没法对应单条记录的独立值。
• 组件方法参数不匹配：onAcceptClick()方法没有定义形参，就算模板把行索引传进来，方法内部也接不住参数，自然没法定位对应行的数据。

修复方案 #

完全绕开冗余的表单值同步逻辑，直接把当前循环的行数据传给点击事件，匹配后端的接口要求：

1. 修正模板里的按钮绑定：
   • 把错误的双括号事件语法改成标准(click)绑定
   • 直接把当前循环的行对象、行索引传给点击方法
     调整后的按钮代码：

   <input type="button" value="Click to present" (click)="onAcceptClick(list, i)">
   

2. 移除所有无效的span上的formControlName绑定：这些字段只是用来展示的文本，不需要作为表单控件存在，删除后不会影响页面展示效果。
3. 调整组件内的onAcceptClick方法，直接从传入的行对象提取接口需要的字段完成提交：

   onAcceptClick(currentStudent: any, rowIndex: number) {
     // 构造后端要求的固定结构请求体
     const submitPayload = {
       id: currentStudent.Id,
       roll_no: currentStudent.Roll_no
     }
     // 调用接口提交
     this.inceSrvc.postmethod('students', submitPayload).subscribe((response: any) => {
       if(response.status === 200) {
         alert('Record updated');
         // 提交成功后直接修改当前行的状态值，页面自动刷新展示为已到课
         this.studentsInfo[rowIndex].Status = 'Y';
       }
     })
   }
   

注：如果业务场景后续确实需要复用SearchForm，不要用单个全局FormGroup存储所有循环行的动态值，可以改用FormArray为每一行单独创建表单控件；但仅针对当前只需要提交两个字段的场景，直接传行数据的方案开发量最小，也不会出现值不同步的问题。

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