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

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以未定义的状态关闭，我的目标是获取该复选框单元格所属的整行的目标

捕获整个表行的正确方法是什么？

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 [(ngModel)]="element.checked" (change)=updateCheckedList($event,i)></mat-checkbox>
      </mat-cell>
    </ng-container>
现在您可以使用索引通过updateCheckedList

方法获取整个对象

updateCheckedList(event,index)
  {
//console.log(event)
if(event.checked)
    console.log(Tbl_dataSource[index]);
  }
click here for demo