Angular Material - 如何捕获复选框列所属的表格行

Question

在我的 Angular 6 应用程序中，我有一个 Material 表，其中有一个复选框列。单击复选框时，我需要捕获所属的表行，以便更新基础数据库记录。我如何掌握整行？这是表格的 html:

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

    <ng-container matColumnDef="checked">
      <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
      <mat-cell *matCellDef="let element"> 
        <mat-checkbox [(ngModel)]="element.checked" (change)=updateCheckedList($event)></mat-checkbox>
      </mat-cell>
    </ng-container>


    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>


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


    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}" (click)="row.highlighted = !row.highlighted" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
  </mat-table>
</div>

这是我的 app.component.ts 中的 updateCheckedList($event) 处理程序:

 updateCheckedList(eventTaget) {
      console.log('event target:  ' + eventTaget.target);
  }

eventTaget.target 未定义，我的目标是获取整个行，该复选框单元格所属

捕获整个表格行的正确技术是什么？

Answer 1

为此，您还需要使用 *matCellDef="let element; let i=index" 传递复选框的索引，您的列将如下所示

 <ng-container matColumnDef="checked">
      <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
      <mat-cell *matCellDef="let element; let i=index"> 
        <mat-checkbox (change)=updateCheckedList(element)></mat-checkbox>
      </mat-cell>
    </ng-container>

现在您可以使用索引在 updateCheckedList 方法中获取整个对象

updateCheckedList(element)
{
  console.log(element);
}

click here for demo