web-dev-qa-db-fra.com

Angular Événement de ligne (clic) de la table des matières déclenché lorsque vous cliquez sur une action dans une cellule de cette ligne

Comment pouvez-vous déclencher un modal avec un bouton à l'intérieur d'un tableau mat sans déclencher l'événement de lignes (clic)? J'ai vu et lu avec L'événement Angular Material 2 Table Mat Row Click également appelé avec le bouton click dans Mat Cell mais la solution d'utiliser $ event.stopPropagation () empêche le modal d'être affiché.

J'ai suivi cela https://stackblitz.com/edit/angular-material2-expandable-rows-filter-pagination-sorting?file=app%2Ftable-example.html pour la fonctionnalité d'extension de ligne.

Voici un petit extrait de mon code:

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

J'ai essayé de faire ce qui a été dit sur la question liée ci-dessus mais en vain. Est-ce qu'il y a un autre moyen?

angularangular-materialbootstrap-modalangular-cdkonrowclick
4
Foo

J'ai une réponse d'ici. lien

Comme le dit Will:

Essayez d'ajouter $ event.stopPropagation () à l'un des gestionnaires de clics les plus profonds (comme dans la cellule).

essayez de faire quelque chose de similaire à ceci:

<mat-cell *matCellDef="let group" (click)="$event.stopPropagation()">
    <button mat-button (click)="onDelete(group.id)">
        <mat-icon>delete</mat-icon>
    </button>
</mat-cell>

dans votre cas Si j'ai raison, ce serait: 

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

Ce que j'avais auparavant, c'était que j'avais un bouton d'édition et de suppression dans la vue développée. Je les ai mis dans la vue normale et j'ai ajouté stopPropagation. Ça a marché pour moi. Je ne sais pas pourquoi votre modal n'est pas ouvert.

voici le code de mon projet:

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