Angular Material 2 Table Mat Row Click 事件也通过在 Mat Cell 中单击按钮来调用 [英] Angular Material 2 Table Mat Row Click event also called with button click in Mat Cell

问题描述

我是材料 2 的新手，我已经实现了

它实际上应该只打开菜单

解决方案

我刚刚遇到了同样的问题，并使用 Will 对原始帖子的评论解决了它，添加了一个带有 $event.stopPropagation<的点击处理程序/code> 作为按钮的直接父级的单元格.我会在这里添加它作为解决方案，以防其他人来这里寻找相同的答案.

我有一个材料数据表，其中该行有一个单击事件，可将您带到编辑模式，最后一列包含一个带有删除操作的按钮.显然您不想同时触发删除和编辑！

这是我用来解决问题的结构:

代码片段

//包含点击事件的行定义<mat-row *matRowDef="让行；列:displayColumns;"(click)="onEdit(row.id)"></mat-row>//定义包含按钮的单元格<ng-container matColumnDef="buttons"><mat-h​​eader-cell *matHeaderCellDef></mat-h​​eader-cell><mat-cell *matCellDef="let group" (click)="$event.stopPropagation()"><button mat-button (click)="onDelete(group.id)"><mat-icon>删除</mat-icon></mat-cell></ng-容器>

完整表格代码

<ng-container matColumnDef="name"><mat-h​​eader-cell *matHeaderCellDef mat-sort-header>名称</mat-h​​eader-cell><mat-cell *matCellDef="let group">{{ group.name }}</mat-cell></ng-容器><ng-container matColumnDef="description"><mat-h​​eader-cell *matHeaderCellDef>说明</mat-h​​eader-cell><mat-cell *matCellDef="let group">{{ group.description }}</mat-cell></ng-容器><ng-container matColumnDef="buttons"><mat-h​​eader-cell *matHeaderCellDef></mat-h​​eader-cell><mat-cell *matCellDef="let group" (click)="$event.stopPropagation()"><button mat-button (click)="onDelete(group.id)"><mat-icon>删除</mat-icon></mat-cell></ng-容器><mat-h​​eader-row *matHeaderRowDef="displayedColumns"></mat-h​​eader-row><mat-row *matRowDef="让行；列:displayColumns;"(click)="onEdit(row.id)"></mat-row></mat-table>

再次感谢 Will Howell 提供的解决方案.

I am new to material 2 and I have implemented mat table and in which I have click event on row to open dialog and there is also a menu button in last column "Action" but on clicking on button it also open dialog box instead of opening menu.

Table

    <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>

It should actually open only menu

解决方案

I've just had the same issue and have solved it using Will's comment to the original post, adding a click handler with $event.stopPropagation to the cell as the direct parent to the button. I'll add it here as a solution in case anyone else comes here looking for the same answer.

I have a Material data table where the row has a click event to take you through to an edit mode and the last column contains a button with a delete action. Obviously you don't want to be triggering delete and edit at the same time!

Here's the structure I've used that resolves the issue:

Snippet

// 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>

Full Table Code

<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>

Again, full credit to Will Howell for this solution.

这篇关于Angular Material 2 Table Mat Row Click 事件也通过在 Mat Cell 中单击按钮来调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！