mat-table中的Angular 5 onchange输入文本字段

Question

组件文件

export interface Assess {
  ques: string;
  unit: string;
}
const DATA: Assess[] = [
  { ques: 'Release  volume', unit: '' },
  { ques: 'Sprint Cycle ',  unit: 'week(s)' },
  { ques: 'No. of stories', unit: '/spr'  }
];

export class AssessComponent implements OnInit {
  /** display questions */
  displayedColumns: string[] = ['ques', 'unit'];
  dataSource = new MatTableDataSource(DATA);

  userMetrics(statusValue: any): void {
    console.log("***  NEW VALUE :: -->>   "+JSON.stringify(statusValue));
  }
}

和HTML文件

<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 #item  name="{{'metricsInput'+index}}" 
            [(ngModel)]="userInput.name" (change)="userMetrics(item.value)">
        <!-- <input type="text" matInput placeholder="Metric Value"> -->
       </mat-form-field> {{element.unit}}
    </mat-cell>
  </ng-container>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

Input fileds in table

当用户在文本框中输入新值时，在表格的每个Mat-cell中选择的问题和提供的答案应在控制台中显示在userMetrics（）函数中由于我是Angular的新手，请帮助我

Answer 1

最后，我找到了解决方法

<ng-container matColumnDef="unit">
  <mat-cell *matCellDef="let element">
    <mat-form-field>
      <input type="text" matInput placeholder="User Value"
         (input)="userMetrics(element.ques,$event.target.value)">
    </mat-form-field> {{element.unit}}
  </mat-cell>
</ng-container>