从 mat-table (angular) 获取行 ID 和输入值

Question

我有一个包含几列的 table，其中一列是输入。在 table 下我有一个按钮，单击它我想更新数据库，单击一下即可更新所有用户的年龄。因此，对于调用，我需要每个用户的行 ID 和输入值。谁能解释一下怎么做？

TS

const ELEMENT_DATA: User[] = [
  { id: 1, country: 'UK', name: 'A', age: 20 },
  { id: 2, country: 'France', name: 'B', age: 21 },
  { id: 3, country: 'Germany', name: 'C', age: 22 }
];

export interface User {
    id: number;
    country: string;
    name: string;
    age: number;
}

@Component({
  selector: 'app-table',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class TableComponent implements OnInit {

  displayedColumns = ['country', 'name', 'age'];
  dataSource = ELEMENT_DATA;

  ngOnInit() {
  }
}

HTML

<div>
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

    <ng-container matColumnDef="country">
      <th mat-header-cell *matHeaderCellDef> Country </th>
      <td mat-cell *matCellDef="let element"> {{element.country}} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <ng-container matColumnDef="age">
      <th mat-header-cell *matHeaderCellDef> Age </th>
      <td mat-cell *matCellDef="let element">
        <div>
          <input type="text" class="age-input" value="{{element.age}}">
        </div>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table> 

  <button mat-raised-button type="submit">
    <i class="material-icons mr-2">save</i>Save
  </button>

</div>

Answer 1

您只需通过 ngModel 绑定 input 元素的值，您的 dataSource 就会更新。

<input type="text" class="age-input" [(ngModel)]="element.age">

See this, on click of the save button the updated model will be printeg to the console.

从 mat-table (angular) 获取行 ID 和输入值

Get row id and input value from mat-table (angular)

input

angular-material

angular

mat-table