Angular 5中Mat-Table输入框变更时获取对应问题与输入值求助

嘿，我来帮你搞定这个问题！你现在的代码里有两个核心问题：一是输入框的ngModel绑定没关联到对应行的问题数据，二是没法把用户输入和对应的ques对应起来。咱们一步步修改：

第一步：修改Component代码 #

首先我们需要在组件里维护一个和表格数据对应的用户输入数组，这样就能把每个输入值和对应的问题关联起来：

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

// 原有的Assess接口保留
export interface Assess { ques: string; unit: string; }
// 新增接口，用来存储每个问题对应的用户输入
export interface UserInput { ques: string; value: string; }

@Component({
  selector: 'app-assess',
  templateUrl: './assess.component.html',
  styleUrls: ['./assess.component.css']
})
export class AssessComponent implements OnInit { 
  displayedColumns: string[] = ['ques', 'unit'];
  // 把原来的常量DATA改为组件属性，方便内部访问
  DATA: Assess[] = [ 
    { ques: 'Release volume', unit: '' }, 
    { ques: 'Sprint Cycle ', unit: 'week(s)' }, 
    { ques: 'No. of stories', unit: '/spr' } 
  ];
  dataSource = new MatTableDataSource(this.DATA);
  // 初始化用户输入数组，和DATA的每一项一一对应
  userInputs: UserInput[] = this.DATA.map(item => ({ ques: item.ques, value: '' }));

  ngOnInit(): void {
  }

  userMetrics(inputIndex: number): void { 
    // 通过索引拿到对应的问题和用户输入
    const currentInput = this.userInputs[inputIndex];
    // 控制台输出格式化后的内容
    console.log(`*** 问题: ${currentInput.ques}，用户输入: ${currentInput.value}`);
    // 如果需要JSON格式输出，可以用下面这行
    // console.log(JSON.stringify({ question: currentInput.ques, userAnswer: currentInput.value }));
  } 
}

第二步：修改HTML模板 #

接下来调整输入框的绑定，让它关联到我们刚创建的userInputs数组，同时把当前行的索引传递给userMetrics方法：

<mat-table #table [dataSource]="dataSource">
  <ng-container matColumnDef="ques">
    <mat-cell *matCellDef="let element">
      <label> {{element.ques}} </label>
    </mat-cell>
  </ng-container>
  <ng-container matColumnDef="unit">
    <mat-cell *matCellDef="let element; let index=index">
      <mat-form-field>
        <input type="text" matInput 
               name="{{'metricsInput'+index}}" 
               [(ngModel)]="userInputs[index].value" 
               (change)="userMetrics(index)">
      </mat-form-field>
      {{element.unit}}
    </mat-cell>
  </ng-container>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

关键改动说明 #

• 新增UserInput接口：明确存储每个问题对应的用户输入结构，让代码更清晰
• 初始化userInputs数组：通过map方法从DATA生成，确保每个问题都有对应的输入存储位置，索引和表格行完全对应
• 调整ngModel绑定：把输入值绑定到userInputs[index].value，这样用户输入的内容会自动同步到组件的数组中
• 传递索引给userMetrics：通过index参数，我们可以精准拿到当前行对应的问题和输入值，实现关联输出

另外，如果想要实时监听用户输入（每输入一个字符就触发），可以把(change)换成(input)事件哦。

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