材料2を初めて使用し、mat tableを実装し、行をクリックしてダイアログを開くためのクリックイベントがある最後の列「アクション」ボタンをクリックすると、メニューを開くのではなくダイアログボックスも開きます。角材2テーブルマット行クリックイベント、Mat Cellのボタンクリックとも呼ばれる
表
<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>
それは実際に
深いクリックハンドラの1つ(セルのような)に '$ event.stopPropagation()'を追加してみてください。 –
@Brian、あなたは解決しましたか?私はあなたがそれをどのように解決したかを知りたい。可能であれば、あなたの解決策を教えてください。 –
@IsakLaFleur私は編集者の一人です。私はこの問題を解決したり答えたりせず、編集しただけです。 –