如何使用角度材料获取行数据?

时间:2017-12-05 18:08:48

标签: javascript html angularjs angular-material2

我有物理化表Api的angular4所以我试图在用户点击行但是没有传递数据时获取行数据,如何将数据从视图传递到组件任何帮助将不胜感激?

app.component.html

<div class="table-container">
<mat-table>
       <ng-container matColumnDef="eventType">
            <mat-header-cell *matHeaderCellDef> Event Type </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.eventType}} </mat-cell>
          </ng-container>
          <!--<button (click)="newMessage()" class="button">New Message</button>-->
          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row._id,$event)"></mat-row>
        </mat-table>
      </div>

app.component.ts

highlight(id,event){
        console.log('Event',event);
    }

1 个答案:

答案 0 :(得分:0)

在模板app.component.html

中更改为以下内容
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="highlight(row,$event)"></mat-row>

您应该在组件app.component.ts

中编写点击处理程序
highlight(row,evt) :void{
   //console.log(row,evt);
}

从(click)=&#34;中删除._id;突出显示(row._id,$ event)&#34;来自您的代码。refer this