Angular 角度材质2表垫行单击事件,也称为垫单元中的按钮单击
我不熟悉material 2,我已经实现了,在其中,我在行上单击事件打开对话框,在最后一列“Action”中还有一个菜单按钮,但单击按钮也会打开对话框,而不是打开菜单 表格Angular 角度材质2表垫行单击事件,也称为垫单元中的按钮单击,angular,angular-material2,angular-cdk,xmltable,onrowclick,Angular,Angular Material2,Angular Cdk,Xmltable,Onrowclick,我不熟悉material 2,我已经实现了,在其中,我在行上单击事件打开对话框,在最后一列“Action”中还有一个菜单按钮,但单击按钮也会打开对话框,而不是打开菜单 表格 <mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)"> <ng-container matColumnDef="id"> <mat-hea
<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef > No. </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox checked='true'></mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="unit_num">
<mat-header-cell *matHeaderCellDef mat-sort-header="unit_num"> Unit No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.unit_num}} </mat-cell>
</ng-container>
<ng-container matColumnDef="unit_type">
<mat-header-cell *matHeaderCellDef mat-sort-header="unit_type"> Unit Type </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.unit_type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="shares">
<mat-header-cell *matHeaderCellDef mat-sort-header="shares"> Shares </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.shares}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sections">
<mat-header-cell *matHeaderCellDef>Section </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sections.section_type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="buildings">
<mat-header-cell *matHeaderCellDef >Building </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.buildings.buildingname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="_id">
<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="edit(element._id)">Edit</button>
<button mat-menu-item (click)="gotoFamily(element)">Go to current family</button>
<button mat-menu-item (click)="createNewFam(element)">Create new family</button>
<button mat-menu-item (click)="openDeleteDialog(element._id)">Delete</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let index=index;" mat-ripple style="position:relative;" (click)="edit(row._id,$event)"></mat-row>
</mat-table>
<mat-paginator [length]="count"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageSide($event)">
</mat-paginator>
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let group">{{ group.name }}</mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let group">{{ group.description }}</mat-cell>
</ng-container>
<ng-container matColumnDef="buttons">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onEdit(row.id)"></mat-row>
</mat-table>
不
单元号。
{{element.unit_num}
单位类型
{{element.unit_type}
分享
{{element.shares}
部分
{{element.sections.section_type}
建筑
{{element.buildings.buildingname}
行动
更多
编辑
转到当前家庭
创建新的家庭
删除
它实际上应该只打开菜单
我刚刚遇到了同样的问题,并使用Will对原始帖子的评论解决了这个问题,在单元格中添加了一个带有
$event.stopPropagation
的点击处理程序,作为按钮的直接父项。我将把它添加到这里作为一个解决方案,以防其他人来这里寻找相同的答案
我有一个物料数据表,其中的行有一个单击事件,引导您进入编辑模式,最后一列包含一个带有删除操作的按钮。显然,您不希望同时触发删除和编辑
以下是我使用的解决问题的结构:
片段
// Row definition containing a click event
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onEdit(row.id)"></mat-row>
// Definition for the cell containing the button
<ng-container matColumnDef="buttons">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
//包含单击事件的行定义
//包含按钮的单元格的定义
删除
完整表格代码
<mat-table #table [dataSource]="dataSource" matSort (matSortChange)="sortData($event)">
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef > No. </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox checked='true'></mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="unit_num">
<mat-header-cell *matHeaderCellDef mat-sort-header="unit_num"> Unit No. </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.unit_num}} </mat-cell>
</ng-container>
<ng-container matColumnDef="unit_type">
<mat-header-cell *matHeaderCellDef mat-sort-header="unit_type"> Unit Type </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.unit_type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="shares">
<mat-header-cell *matHeaderCellDef mat-sort-header="shares"> Shares </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.shares}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sections">
<mat-header-cell *matHeaderCellDef>Section </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.sections.section_type}} </mat-cell>
</ng-container>
<ng-container matColumnDef="buildings">
<mat-header-cell *matHeaderCellDef >Building </mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.buildings.buildingname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="_id">
<mat-header-cell *matHeaderCellDef> Action </mat-header-cell>
<mat-cell *matCellDef="let element">
<button mat-button [matMenuTriggerFor]="menu"><mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="edit(element._id)">Edit</button>
<button mat-menu-item (click)="gotoFamily(element)">Go to current family</button>
<button mat-menu-item (click)="createNewFam(element)">Create new family</button>
<button mat-menu-item (click)="openDeleteDialog(element._id)">Delete</button>
</mat-menu>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns; let index=index;" mat-ripple style="position:relative;" (click)="edit(row._id,$event)"></mat-row>
</mat-table>
<mat-paginator [length]="count"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
(page)="pageSide($event)">
</mat-paginator>
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let group">{{ group.name }}</mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef>Description</mat-header-cell>
<mat-cell *matCellDef="let group">{{ group.description }}</mat-cell>
</ng-container>
<ng-container matColumnDef="buttons">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onEdit(row.id)"></mat-row>
</mat-table>
名称
{{group.name}
描述
{{group.description}}
删除
再次感谢威尔·豪厄尔的这一解决方案。我认为目前公认的答案有一个缺陷。上述解决方案使行的一部分不可拾取。为了保持整行可点击,您可以将$event以html格式传递给组件,并从组件调用stoppropogation: html:
<mat-cell *matCellDef="let element" class="rightalign">
<button mat-raised-button color="primary" (click)="openDialog(element, $event)"><mat-icon>edit</mat-icon> Breyta</button>
</mat-cell>
}尝试将
$event.stopPropagation()
添加到一个更深的单击处理程序(如单元格上的处理程序)。@Brian,你解决了吗?我想知道你是怎么解决的。如果可能的话,请分享你的解决方案。@Isakalfleur我只是编辑之一;我没有解决或回答这个问题,我只是复制编辑了它。@Nasiruddin,你解决了吗?你能分享吗?我已经用一个flag变量完成了,并关闭了其他下拉菜单。谢谢,这将帮助某人。。我的解决方案有点复杂,它包括各种各样的调用痕迹,
工作得很好。当我在按钮元素上使用mat按钮时,单击事件不起作用,当我不使用mat按钮时,我不会收到第一次单击事件,但在那之后我会收到所有单击事件。你能想到我面临的一些问题吗@主议长(单击)=“$event.stopPropagation()”工作非常好!感谢(单击)=“$event.stopPropagation()
从打开扩展到单击行,效果非常好,但是当我单击每行的按钮时,有没有办法打开行。因为我有一个编辑
按钮,我想单击该按钮打开扩展部分是的,我已经这样做了,因为在我的案例状态下,需要调用服务。行的哪一部分不可访问@chrisinmtown依赖于单元格的html,但在某些情况下,该按钮不会填充整个单元格。该单元格的其余部分不会将事件传播到行中,因此该按钮在单元格的空白部分显示为不可单击。(但您现在可能已经发现)