我的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
图标时不会调用整个行的单击处理程序?
答案 0 :(得分:1)
以下几点可能会有所帮助:
将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
}
答案 1 :(得分:1)
我有类似的问题,我想显示从表中单击图标时弹出的窗口。这是我的解决方法:
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
}
}