角材2テーブルマット行クリックイベント、Mat Cellのボタンクリックとも呼ばれる

Question

材料2を初めて使用し、mat 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> 

それは実際に

Answer 1

のみメニューを開く必要があります私は同じ問題を持っていたとウィルのを使用して、それを解決しました元のpにコメントするボタンの直接の親としてセルに$event.stopPropagationのクリックハンドラを追加します。他の誰かが同じ答えを探すためにここに来た場合の解決策として、ここでそれを追加します。

私は行にクリックイベントがあり、編集モードに移行し、最後の列に削除アクションを含むボタンが含まれているMaterialデータテーブルがあります。明らかに、同時に削除と編集を開始したくないのです！ウィルハウエルへ

スニペット

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

、完全な信用のため：

ここで問題を解決し、私が使用した構造だがこの解決策。