web-dev-qa-db-fra.com

Matériau angulaire 2 Evénement de clic sur la ligne de tapis de table également appelé avec un clic de bouton dans la cellule du tapis

Je suis nouveau dans le matériau 2 et j'ai implémenté mat tableau et dans lequel j'ai click event sur row pour ouvrir la boîte de dialogue et il y a aussi un bouton de menu dans la dernière colonne "Action" mais en cliquant sur le bouton, il ouvre également boîte au lieu d'ouvrir le menu.

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>

 it open **Dialog box** and action buttons are hidden

Il ne devrait en fait ouvrir que le menu

 only action, dialog box disabled

angular-material2materialxmltablecdkonrowclick
11
Nasiruddin Saiyed

Je viens d'avoir le même problème et je l'ai résolu en utilisant le commentaire de Will dans le message d'origine, en ajoutant un gestionnaire de clics avec $event.stopPropagation à la cellule en tant que parent direct du bouton. Je vais l'ajouter ici comme solution au cas où quelqu'un d'autre viendrait ici chercher la même réponse.

J'ai une table de données de matériau où la ligne a un événement click pour vous faire passer en mode édition et la dernière colonne contient un bouton avec une action de suppression. Évidemment, vous ne voulez pas déclencher la suppression et la modification en même temps!

Voici la structure que j'ai utilisée qui résout le problème:

Snippet 

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

Code de tableau complet 

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

Encore une fois, Will Howell mérite toute cette reconnaissance.

44
lordchancellor

La réponse acceptée actuellement a un défaut à mon avis. La solution ci-dessus garde une partie de la ligne non cliquable. Afin de garder la ligne entière cliquable, vous pouvez transmettre l'événement $ au composant en HTML et appeler stoppropogation à partir du composant:

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>

Composant: 

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

}

0
Gsuz