각진 재질 2 테이블 매트 행 클릭 이벤트 또한 매트 셀에서 버튼 클릭으로 호출됩니다.

Question

재료 2를 처음 사용하고 mat table을 구현했으며 행을 클릭하여 대화 상자를 열고 거기에 메뉴 버튼이 있습니다. 마지막 열 "작업"하지만 버튼을 클릭하면 열기 메뉴 대신 대화 상자가 열립니다.

그것은 사용하여 실제로 난 그냥 같은 문제를 했어

Answer 1

전용 메뉴를 열어야하고 해결 한

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

표 윌의 원래 p에 댓글을 달다. 버튼에 대한 직접적인 부모로서 셀에 $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> 
    <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> 

, 윌 하웰에 전체 신용 이 해결책.