Angular：如何提取表格选中行的可编辑输入框（评论）值

嘿，我来帮你捋捋这个问题！从你描述的情况来看，核心矛盾是event.target.value能拿到最新的评论内容，但this.selectedNewBsaComment却返回null，不过组件控制台又能正确输出内容——这大概率是数据绑定或变量赋值的时机/关联逻辑出了问题，咱们一步步拆解排查：

1. 先检查「选中行」的初始化逻辑 #

你提到要提取选中行的评论，那首先得确认：当用户选中某一行时，有没有把该行的评论值正确赋值给this.selectedNewBsaComment？

举个例子，如果你的表格行是通过*ngFor渲染的，选中逻辑应该类似这样：

// component.ts
selectedRow: any;
selectedNewBsaComment: string = '';

// 选中行时触发的方法
onRowSelect(row: any) {
  this.selectedRow = row;
  // 关键：把选中行的现有评论赋值给目标变量
  this.selectedNewBsaComment = row.comment || '';
}

如果这一步没做，this.selectedNewBsaComment就会一直是初始的null，哪怕你能通过event.target.value拿到输入框的实时值，两者也没关联起来。

2. 确认输入框的绑定方式 #

如果你的评论输入框是直接用原生事件（比如(input)或(change)）拿值，那得手动同步到this.selectedNewBsaComment；如果用Angular的双向绑定，就能自动同步：

方式1：手动同步（适合原生事件场景）

<!-- component.html -->
<tr *ngFor="let item of tableData" [class.active]="item === selectedRow" (click)="onRowSelect(item)">
  <td>
    <input type="text" [value]="item.comment" (input)="updateComment($event, item)" />
  </td>
</tr>

// component.ts
updateComment(event: Event, row: any) {
  const newComment = (event.target as HTMLInputElement).value;
  console.log(newComment); // 你说这里能正确输出
  // 同步更新变量和行数据
  this.selectedNewBsaComment = newComment;
  row.comment = newComment;
}

方式2：双向绑定（更简洁）

直接用[(ngModel)]绑定到选中行的评论字段，同时关联到你的目标变量：

<input type="text" [(ngModel)]="selectedRow.comment" (ngModelChange)="selectedNewBsaComment = $event" />

这样输入框的内容变化会自动同步到selectedRow.comment，同时实时更新selectedNewBsaComment。

3. 排查Modal组件的传值逻辑 #

如果selectedNewBsaComment是要传递给modal.component，那得确认子组件有没有正确接收：

// modal.component.ts
import { Input } from '@angular/core';

@Input() comment: string; // 接收父组件传递的评论值

父组件调用模态框时要确保绑定正确：

<app-modal [comment]="selectedNewBsaComment"></app-modal>

如果模态框里也需要编辑并同步回父组件，还得配合@Output实现双向绑定：

// modal.component.ts
@Output() commentChange = new EventEmitter<string>();

onModalCommentChange(newVal: string) {
  this.commentChange.emit(newVal);
}

父组件里用双向绑定语法：

<app-modal [(comment)]="selectedNewBsaComment"></app-modal>

核心总结 #

你现在的问题本质是**this.selectedNewBsaComment和输入框的内容没有建立有效的同步关联**：要么是选中行时没初始化这个变量，要么是输入框变化时没手动更新它。只要把这两个环节的逻辑补全，变量就能正确拿到最新的评论值了。

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