行(クリック)イベントをトリガーせずに、マットテーブル内のボタンでモーダルをトリガーするにはどうすればよいですか?私は Angular Material 2 Table Mat Row Click event Called with Button Click in Mat Cell を見て読みましたが、そこで$ event.stopPropagation()を使用するソリューションでは、モーダルが表示されません。
私はこれを行拡張機能のために https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html に従いました。
これが私のコードの小さなスニペットです:
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
</ng-container>
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef mat-sort-header>Username</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.username}}</mat-cell>
</ng-container>
<ng-container matColumnDef="email" class="hideOnResponse">
<mat-header-cell *matHeaderCellDef mat-sort-header>Email</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.email}}</mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row" [ccDetailRow]="row" [ccDetailRowTpl]="tpl"></mat-row>
<mat-footer-row *matFooterRowDef="['loading']" [ngClass]="{'hide':dataSource!=null}"></mat-footer-row>
<mat-footer-row *matFooterRowDef="['noData']" [ngClass]="{'hide':!(dataSource!=null && dataSource.data.length==0)}"></mat-footer-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" [pageSize]="5" showFirstLastButtons></mat-paginator>
上記の質問に記載されていることを実行しようとしましたが、役に立ちませんでした。他に方法はありますか?
ここから回答を得ました。 リンク
ウィルが言うように:
$ event.stopPropagation()をより深いクリックハンドラーの1つ(セルなど)に追加してみてください。
次のようなことを試してください:
<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
<button mat-button (click)="onDelete(group.id)">
<mat-icon>delete</mat-icon>
</button>
</mat-cell>
あなたの場合私が正しい場合は次のようになります:
<mat-cell *matCellDef="let element" (click)="$event.stopPropagation()">
<a (click)="editItem(element)" data-toggle="modal" data-target="#editor" matTooltip="Edit" aria-label="tooltip">
<i class="fas fa-pencil-alt"></i>
</a>
<a (click)="deleteItem(element.id)" data-toggle="modal" data-target="#editor" matTooltip="Delete" aria-label="tooltip">
<i class="fas fa-trash-alt"></i>
</a>
</mat-cell>
私が以前持っていたのは、展開ビューに編集および削除ボタンがあったことです。それらを通常のビューに配置し、stopPropagationを追加しました。それは私のために働いた。モーダルが開いていない理由がわかりません。
これが私のプロジェクトのコードです:
<ng-container matColumnDef="recordDate">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Record Date </th>
<td mat-cell *matCellDef="let request" (click)=$event.stopPropagation()> {{request.recDate | date }}
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="openDialog(true, request.requestId)">edit</mat-icon>
</button>
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon" (click)="deleteRequest(request.requestId)">delete</mat-icon>
</button>
</td>
</ng-container>