Angular新手求助：实现表格值变更事件向组件传值

Hey there! Let's fix this step by step since you're new to Angular. The main issues with your current code are the misplaced <input> tag inside <td> and the conflicting contenteditable on the <tbody> which can interfere with Angular's form bindings. Here's how to properly pass updated table values to your component:

方案1：使用Input表单控件（推荐） #

这种方式更符合Angular表单的最佳实践，避免contenteditable带来的冲突，同时能利用双向绑定自动同步数据。

修改后的HTML代码 #

<tbody>
  <!-- 遍历表格数据，同时记录行索引 -->
  <tr *ngFor="let item of calendarTableSelected; let rowIndex = index">
    <!-- 遍历当前行的结果集，记录列索引 -->
    <td *ngFor="let name of item.results; let colIndex = index">
      <input 
        type="text"
        <!-- 双向绑定到name.value，修改时自动更新原数据 -->
        [(ngModel)]="name.value"
        <!-- 值变化时触发组件方法，传递更新后的值、当前行数据和列索引 -->
        (ngModelChange)="saveCalendar($event, item, colIndex)"
        <!-- 生成唯一的name属性，避免Angular表单报错 -->
        name="calendar-cell-{{rowIndex}}-{{colIndex}}"
      >
    </td>
  </tr>
</tbody>

Component.ts中的方法实现 #

// 可选：添加类型定义提升代码健壮性
interface CalendarResult {
  value: string;
}

interface CalendarItem {
  results: CalendarResult[];
}

export class YourComponent {
  calendarTableSelected: CalendarItem[] = []; // 你的表格数据源

  saveCalendar(updatedValue: string, currentItem: CalendarItem, columnIndex: number) {
    // 这里可以处理更新逻辑，比如打印调试、调用API保存等
    console.log('更新后的值:', updatedValue);
    console.log('对应的行数据:', currentItem);
    console.log('修改的是第', columnIndex, '列');

    // 因为用了双向绑定，currentItem.results[columnIndex].value已经自动更新了
    // 如果需要额外处理，比如格式化值
    currentItem.results[columnIndex].value = updatedValue.trim();

    // 示例：调用服务保存到后端
    // this.yourCalendarService.updateItem(currentItem).subscribe({
    //   next: (response) => console.log('保存成功:', response),
    //   error: (err) => console.error('保存失败:', err)
    // });
  }
}

方案2：让TD直接可编辑（无需Input） #

如果你想让表格单元格直接可编辑（不用input框），可以用contenteditable结合blur事件来捕获修改后的值：

HTML代码 #

<tbody>
  <tr *ngFor="let item of calendarTableSelected">
    <td 
      contenteditable="true"
      <!-- 初始渲染显示name.value -->
      [textContent]="name.value"
      <!-- 单元格失去焦点时触发保存方法 -->
      (blur)="saveCalendar($event.target.textContent, item, name)"
      *ngFor="let name of item.results"
    >
    </td>
  </tr>
</tbody>

Component.ts中的方法实现 #

saveCalendar(updatedValue: string, currentItem: any, resultItem: any) {
  // 去除输入前后的空格
  const trimmedValue = updatedValue.trim();
  // 更新原数据
  resultItem.value = trimmedValue;
  
  console.log('更新后的值:', trimmedValue);
  // 后续保存逻辑和方案1一致
}

关键注意事项 #

• 确保calendarTableSelected是可修改的数组（不是只读的），这样双向绑定或手动赋值才能生效。
• 如果你的表格是表单的一部分，建议使用Reactive Forms（比如FormArray）来管理表格数据，这在处理复杂表格时更灵活。
• 每个表单控件（input）需要唯一的name属性，否则Angular的表单模块会抛出错误。

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