Событие Angular Material 2 Table Mat Row Click также вызывается нажатием кнопки в ячейке Mat

Я новичок в материале 2, и я реализовал таблицу матов, в которой у меня есть событие щелчка в строке, чтобы открыть диалоговое окно, и есть также кнопка меню в последнем столбце «Действие», но при нажатии на кнопку также открывается диалоговое окно вместо открытия меню.

Таблица

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

открыто ** диалоговое окно ** и кнопки действий скрыты

На самом деле он должен открывать только меню

только действие, диалоговое окно отключено


person Nasiruddin Saiyed    schedule 01.11.2017    source источник
comment
Попробуйте добавить $event.stopPropagation() в один из обработчиков более глубоких щелчков (например, в ячейке).   -  person Will Howell    schedule 01.11.2017
comment
@ Брайан, ты решил? Я хотел бы знать, как вы это решили. Если возможно, поделитесь своим решением.   -  person Isak La Fleur    schedule 02.02.2018
comment
@IsakLaFleur Я всего лишь один из редакторов; Я не решил и не ответил на эту проблему, я только скопировал и отредактировал.   -  person Brian Tompsett - 汤莱恩    schedule 02.02.2018
comment
@ Насируддин, ты это решил? Вы можете поделиться?   -  person Isak La Fleur    schedule 02.02.2018
comment
Я сделал это с помощью переменной флага и закрыл другое раскрывающееся меню   -  person Nasiruddin Saiyed    schedule 02.02.2018
comment
если щелкнуть раскрывающийся список-1, то закрытый раскрывающийся список-2, иначе закрытый раскрывающийся список-1   -  person Nasiruddin Saiyed    schedule 02.02.2018


Ответы (2)


У меня была такая же проблема, и я решил ее, используя комментарий Уилла к исходному сообщению, добавив обработчик щелчка с $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>

Опять же, полная заслуга Уилла Хауэлла за это решение.

person lordchancellor    schedule 26.02.2018
comment
спасибо, это поможет кому-то .. мое решение было немного сложным, оно включает в себя различные вызовы - person Nasiruddin Saiyed; 27.02.2018
comment
Спасибо, <mat-cell (click)="$event.stopPropagation()"> работал отлично. - person Joshua Kemmerer; 23.03.2018
comment
Событие click не работает, когда я использую кнопку mat-button на элементе кнопки, а также, когда я не использую mat-button, я не получаю событие первого щелчка, но после этого я получаю все события щелчка. Не могли бы вы подумать о некоторых проблемах, с которыми я столкнулся? @Лорд-канцлер - person Kartik Watwani; 18.10.2018
comment
(click) = $ event.stopPropagation () Прекрасно работает! Спасибо - person Abdullah Feroz; 26.02.2019
comment
(click)="$event.stopPropagation() отлично работал, открывая раскрытие при нажатии на строку, но есть ли способ открыть строку, когда я нажимаю кнопку каждой строки. Поскольку у меня есть кнопка EDIT, которую я хочу нажать, чтобы открыть часть расширения - person Avishek; 03.06.2020

На мой взгляд, в текущем принятом ответе есть недостаток. Вышеупомянутое решение сохраняет часть строки неактивной. Чтобы вся строка оставалась доступной для кликов, вы можете передать событие $ компоненту в html и вызвать stoppropogation из компонента:

html:

<mat-cell *matCellDef="let element" class="rightalign">
    <button mat-raised-button color="primary" (click)="openDialog(element, $event)"><mat-icon>edit</mat-icon> Breyta</button>
  </mat-cell>

Составная часть:

openDialog(data, event): void {
event.stopPropagation();
const editDialogRef = this.dialog.open(EditClientComponent, {
  data: data
});

}

person Gsuz    schedule 15.02.2019
comment
Да, я уже сделал это, потому что в моем случае необходимо вызвать состояние и службу. - person Nasiruddin Saiyed; 16.02.2019
comment
На какую часть строки нельзя нажимать? - person chrisinmtown; 28.05.2019
comment
@chrisinmtown зависит от html ячейки, но в некоторых случаях кнопка не заполняет всю ячейку. остальная часть этой ячейки не будет распространять события на строку, поэтому она кажется неактивной в пустых частях ячейки с кнопкой. (но вы, наверное, уже узнали) - person dfinki; 26.01.2020