如何将表格的选定行值传递给按钮单击事件-材质设计-Angular 6 [英] How to pass selected row value of table to button click event - Material design - Angular 6

问题描述

我以前的问题不清楚.在我努力完成任务时，请允许我再次清楚地询问.

my previous question was not clear. Allow me to ask again clearly as I'm struggling complete my task.

我在每一行都有mat-table和复选框. (无主复选框).每当我选择该行时，都应该将所选行的值发送到表外的按钮.

I've mat-table along with checkbox for every row. (No master checkbox). whenever I select the row I should send the values of the selected row to button which is outside of the table.

[[如果我在表中有一个按钮，则可以通过在表中存在该按钮的情况下，通过*matCellDef="let element"变量访问默认的 ELEMENT 来做到这一点.

[if I have a button inside the table, I could do that by accessing the default ELEMENT from *matCellDef="let element" variable if the button present inside the table.

但是我不知道如何将选定的行值传递给按钮.我必须根据所选行中的值进行路由.

But I don't know how to pass the selected row value to the button. I've to do routing based on the value from the selected row.

到目前为止，我已经

HTML

<div><button mat-button  [disabled]="!checkedbtn" (click)='linktomynxtpage()'>link to another page</button></div>

<table #demoTable mat-table [dataSource]="sample" multiTemplateDataRows>
// some ng-container with <th><td>

 <ng-container *ngIf="isAdmin" matColumnDef="actions">
    <th mat-header-cell *matHeaderCellDef> Action </th>
    <td mat-cell *matCellDef="let element">     
      <mat-checkbox class="select-checkbox" [(ngModel)]="checkedbtn" ></mat-checkbox>        
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row style="text-align:left" *matRowDef="let element; columns: displayedColumns;" ></tr>
  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>

TS

linktomynxtpage(){
    //some logics
    //passing row value. and doing routing
    this.nxtPage.navigate(['/home/particular-user'])

}

推荐答案

使用(change)事件

  <mat-checkbox class="select-checkbox" [(ngModel)]="checkedbtn" (change)="onChange(element)" ></mat-checkbox>  


onChange(row){
  // put the row whenever you want
}

这篇关于如何将表格的选定行值传递给按钮单击事件-材质设计-Angular 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！