Angular Material table 行(单击)事件在单击该行内单元格中的操作时触发
Angular Material table row (click) event triggered when clicking an action in a cell within that row
如何在 mat-table 中使用按钮触发模式而不触发行(点击)事件?我已经看到并阅读了 但是在那里使用 $event.stopPropagation() 的解决方案阻止了显示模态。
我遵循这个 https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html 的行扩展功能。
这是我的一小段代码:
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef mat-sort-header>Username</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.username}}</mat-cell>
</ng-container>
<ng-container matColumnDef="email" class="hideOnResponse">
<mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row" [ccDetailRow]="row" [ccDetailRowTpl]="tpl"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null && dataSource.data.length==0)}"></mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
我已尝试按照上面链接的问题中所述进行操作,但无济于事。还有其他办法吗?
从这里得到答案。
正如威尔所说:
Try adding $event.stopPropagation() to one of the deeper click
handlers (like on the cell).
尝试做类似的事情:
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
在你的情况下如果我是正确的,它将是:
<mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
我之前有的是在展开视图中有编辑和删除按钮。我将它们放在普通视图中并添加了 stopPropagation。它对我有用。我不确定为什么你的模式没有打开。
这是我项目中的代码:
<ng-container matColumnDef="recordDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Record Date </th>
<td mat-cell *matCellDef="let request" (click)=$event.stopPropagation()> {{request.recDate | date }}
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="openDialog(true, request.requestId)">edit</mat-icon>
</button>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="deleteRequest(request.requestId)">delete</mat-icon>
</button>
</td>
</ng-container>
如何在 mat-table 中使用按钮触发模式而不触发行(点击)事件?我已经看到并阅读了
我遵循这个 https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html 的行扩展功能。
这是我的一小段代码:
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef mat-sort-header>Username</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.username}}</mat-cell>
</ng-container>
<ng-container matColumnDef="email" class="hideOnResponse">
<mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row" [ccDetailRow]="row" [ccDetailRowTpl]="tpl"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null && dataSource.data.length==0)}"></mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
我已尝试按照上面链接的问题中所述进行操作,但无济于事。还有其他办法吗?
从这里得到答案。
正如威尔所说:
Try adding $event.stopPropagation() to one of the deeper click handlers (like on the cell).
尝试做类似的事情:
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
在你的情况下如果我是正确的,它将是:
<mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
我之前有的是在展开视图中有编辑和删除按钮。我将它们放在普通视图中并添加了 stopPropagation。它对我有用。我不确定为什么你的模式没有打开。
这是我项目中的代码:
<ng-container matColumnDef="recordDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Record Date </th>
<td mat-cell *matCellDef="let request" (click)=$event.stopPropagation()> {{request.recDate | date }}
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="openDialog(true, request.requestId)">edit</mat-icon>
</button>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="deleteRequest(request.requestId)">delete</mat-icon>
</button>
</td>
</ng-container>