angular - 角度材料 - 如何捕获复选框列所属的表格行

Question

在我的 Angular 6 应用程序中，我有一个材料表，其中有一个复选框列。单击复选框时，我需要捕获所属的表行，以便更新底层数据库记录。我如何抓住整行？这是表格的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 未定义，我的目标是获取该复选框单元所属的整行

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

标签： angularangular-materialangular-material-6

Answer 1

For that you need to pass the index of your checkbox also using *matCellDef="let element; let i=index" your column will look like this

 <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>

now you can get the entire object in updateCheckedList method using index

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

click here for demo