J'ai une exigence dans laquelle je devrais être capable de capturer la ligne sélectionnée [l'utilisateur peut cliquer n'importe où sur la ligne]. J'ai parcouru la documentation https://material.angular.io/components/table/overview mais je n'ai pas trouvé le moyen de capturer la ligne sélectionnée et son contenu. J'ai essayé de joindre un événement de clic sur la balise md-table mais cela n'a pas fonctionné.
<md-table #table [dataSource]="tableDataSource" (click)="selectRow(row)">
J'ai pu le faire fonctionner ainsi:
dans composant.html
<md-table [dataSource]="dataSource">
<ng-container mdColumnDef="a">
<md-header-cell *mdHeaderCellDef> a </md-header-cell>
<md-cell *mdCellDef="let element"><a routerLink="{{element.number}}"> {{element.a}} </a></md-cell>
</ng-container>
<ng-container mdColumnDef="b">
<md-header-cell *mdHeaderCellDef> b </md-header-cell>
<md-cell *mdCellDef="let element"> {{element.b}} </md-cell>
</ng-container>
<md-header-row *mdHeaderRowDef="['a', 'b']"></md-header-row>
<md-row *mdRowDef="let row; columns: ['a', 'b']" (click)="selectRow(row)"></md-row>
</md-table>
et dans composant.ts
selectRow(row) {
console.log(row);
}
https://material.angular.io/components/table/overview
Vous pouvez ajouter votre événement click à l'élément tr ayant l'attribut mat-row et vous avez accès aux lignes relatives à * matRowDef = "let row;" comme ci-dessous:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selectRow(row)"></tr>
</table>
selectRow (row) est votre fonction qui doit être écrite dans votre composant.
J'ai pu faire fonctionner ce travail en attachant l'événement click [selectRow (row)] sur md-row à la place
<md-table #table [dataSource]="tableDataSource">
<md-header-row *cdkHeaderRowDef="tableColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: tableColumns;" (click)="selectRow(row)"></md-row>
<ng-container cdkColumnDef="day">