如何在不触发行(单击)事件的情况下触发mat-table中的按钮模式?我已经看过并阅读Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell然而使用$ 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>
我已经尝试过做上面链接的问题所说的但无济于事 . 还有其他方法吗?
1 回答
从这里得到答案 . link
威尔说:
尝试做类似这样的事情:
in your case If I'm correct it would be:
之前我曾在扩展视图中编辑和删除按钮 . 我把它们放在普通视图中并添加了stopPropagation . 它对我有用 . 我不确定为什么你的模态没有被打开 .
这是我项目的代码: