web-dev-qa-db-fra.com

Comment ajouter un événement click sur mat-row dans angular

J'ai ajouté ceci, mais lors de l'inspection d'un élément avec Chrome DevTools, la fonction de clic n'apparaît pas!

Voici mon code:

  <mat-table [dataSource]="dataSource1" class="mat-table">
    <!-- Position Column -->
    <ng-container matColumnDef="Objname">
      <mat-header-cell *matHeaderCellDef> ObjName </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.objname}} </mat-cell>
    </ng-container>
    <!-- Weight Column -->
    <ng-container matColumnDef="Successcount">
      <mat-header-cell *matHeaderCellDef> Successcount   </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.successcount}} </mat-cell>
    </ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row (click)="getRecord(element.objname)" *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
angulartypescriptangular-material
16
Vyas Reddy

presque la même solution que ci-dessus mais un peu plus utile si vous essayez de récupérer l'objet à partir de la ligne cliquée

<mat-row  *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row)"></mat-row>

lorsque vous vous connectez à la ligne, vous obtenez l'objet complet de la ligne

28
Jonathan Meguira

Regarde ton *matRowDef, vous avez créé une variable de ligne et pourtant, dans votre événement click, vous en attribuez une à un élément.

<mat-row (click)="getRecord(element.objname)" *matRowDef="let row; columns: displayedColumns;"></mat-row>

Sinon, vous ne le verrez pas l'inspecter: Angular crée des écouteurs d'événement dans JS pour gérer les événements. Vous pouvez le créer en HTML ou en Javascript, ils choisissent de le faire en Javascript. Il suffit de tester votre fonction avec un journal de console, cela devrait fonctionner.

6
Maryannah

En général, un événement clic sur la ligne fonctionne ( https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html ).

Le element.objname n'est pas défini dans cette étendue. Vous devez renommer let row; à let element.

2
Shadowlauch