[英]How to pass selected row value of table to button click event - Material design - Angular 6
[英]With Angular Material tables, how to have a click event handler for a table row that ignores one column
我的Angular Material表中有一行要单击的行。 问题是我在行的最后一列中也有一个图标,我也想单击该图标,但处理方式有所不同。 现在,当我单击该图标时,它同时调用了两个处理程序,但我不希望这样。 这是我的代码:
<div class="mat-elevation-z8"> <table mat-table #table [dataSource]="dataSource" matSort aria-label="Publisher"> <!-- LastName Column --> <ng-container matColumnDef="lastName"> <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Name</th> <td mat-cell *matCellDef="let row">{{row.lastName}}</td> </ng-container> <!-- FirstName Column --> <ng-container matColumnDef="firstName"> <th mat-header-cell *matHeaderCellDef mat-sort-header>First Name</th> <td mat-cell *matCellDef="let row">{{row.firstName}}</td> </ng-container> <!-- Actions --> <ng-container matColumnDef="actions"> <th mat-header-cell *matHeaderCellDef></th> <td mat-cell *matCellDef="let row"> <button mat-icon-button (click)="onClickDelete(row.id)"> <mat-icon>delete</mat-icon> </button> </td> </ng-container> <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> <tr mat-row (click)="onClickPublisher(row.id)" *matRowDef="let row; columns: displayedColumns;"></tr> </table> <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> </div>
如何做到这一点,以便当我单击delete
图标时,它不会调用整行的单击处理程序?
以下几件事可能会有所帮助:
将click事件以及ID传递到后端代码中,如下所示:
<button mat-icon-button (click)="onClickDelete($event, row.id)">
<mat-icon>delete</mat-icon>
</button>
然后,您可以在ts中捕获它。 在图标上,您可以像这样尝试stopPropagation:
onClickDelete(e, id) {
e.stopPropagation();
// do stuff with the id;
}
在该行上,一个选项是检查目标类列表:
onClickDelete(e, id) {
if (e.target.className.includes('mat-icon-button')) {
return;
}
//Do stuff with id
}
我有类似的问题,我想显示从表中单击图标时弹出的窗口。 这是我的解决方法:
html
<ng-container matColumnDef="delete">
<mat-header-cell *matHeaderCellDef> Delete </mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-button (click)="showAlert(element)">
<i class="material-icons">delete_forever</i>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectedRows(row)"></mat-row>
</mat-table>
ts
...
public isClicked = false;
...
showAlert(action) {
this.isClicked = true;
//this open popup
swal({
//popup part
}).then(isConfirm => {
this.isClicked = false;
}, (dismiss) => {
if (dismiss === 'cancel' || dismiss === 'close') {
this.isClicked = false;
}
});
}
然后只需检查是否单击了图标
selectedRows(row){
if(!this.isClicked){
//do what ever you want icon is not clicked
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.