Comment capturer la ligne de table sélectionnée dans Material Design Tableau MD

J'ai une exigence dans laquelle je devrais pouvoir capturer la chaîne sélectionnée [L'utilisateur peut cliquer n'importe où dans la ligne]. J'ai regardé à travers la documentation
https://material.angular.io/co ... rview
, Mais je n'ai pas pu trouver un moyen de capturer la chaîne sélectionnée et son contenu. J'ai essayé de joindre un événement click à
tagu

md-table

, Mais cela n'a pas fonctionné.


<md-table "="" #table="" ="selectrow="" [datasource]="tableDataSource" click="" row="">


</md-table>
Invité:

Alice

Confirmation de:

J'ai pu faire fonctionner de cette façon:

dans component.html an


<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']" ="selectrow="" click="" row=""></md-row>
</md-table>


UN B. component.ts an


selectRow/row/ {
console.log/row/;
}

Emilie

Confirmation de:

https://material.angular.io/co ... rview
Vous pouvez ajouter votre événement click En éléments tr, qui a un attribut mat-row, Et vous avez accès à la chaîne relativement *matRowDef="let row;" Comme indiqué ci-dessous :


<table [datasource]="dataSource" class="mat-elevation-z8" mat-table="">
<!-- Position Column -->
<ng-container matcolumndef="position">
<th *matheadercelldef="" mat-header-cell=""> No. </th>
<td *matcelldef="let element" mat-cell=""> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matcolumndef="name">
<th *matheadercelldef="" mat-header-cell=""> Name </th>
<td *matcelldef="let element" mat-cell=""> {{element.name}} </td>
</ng-container>
<tr *matheaderrowdef="displayedColumns" mat-header-row=""></tr>
<tr "="" *matrowdef="let row; columns: displayedColumns;" ="selectrow="" click="" mat-row="" row=""></tr>
</table>



selectRow/ligne/ - Ceci est votre fonction qui doit être enregistrée dans votre composant.

Agathe

Confirmation de:

J'ai pu faire ce travail, attacher un événement à la place click [selectRow/row/] sur

md-row


<md-table #table="" [datasource]="tableDataSource">
<md-header-row *cdkheaderrowdef="tableColumns"></md-header-row>
<md-row "="" *cdkrowdef="let row; columns: tableColumns;" ="selectrow="" click="" row=""></md-row>
<ng-container cdkcolumndef="day">


</ng-container></md-table>

Alice

Confirmation de:

Dans l'affaire Général, l'événement des lignes de rangée fonctionne

/
https://stackblitz.com/edit/an ... .html
/.

Ici dans l'exemple ci-dessus

Dans le tableau-basique-exemple.html


/click/="test/row/"


Dans le tableau-base-exemple.ts


test/row/{
console.log/row/
}


La console affiche l'objet de chaîne de table sélectionnée.

Pour répondre aux questions, connectez-vous ou registre