Jak pobrać wybrany wiersz tabeli w tabeli Material Design md


Mam wymaganie, w którym muszę być w stanie złapać wybrany wiersz [użytkownik może kliknąć w dowolnym miejscu wiersza]. Przejrzałem dokumentację

https://material.angular.io/co ... rview
https://material.angular.io/co ... rview
ale nie mogłem znaleźć sposobu na pobranie wybranego wiersza i jego zawartości. Próbowałem dołączyć zdarzenie kliknięcia do
tegu

md-table

ale to nie zadziałało.
<md-table #table [dataSource]="tableDataSource" (click)="selectRow(row)">

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Udało mi się to zrobić w ten sposób:
w component.html rok
<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}} [/url]</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>

iw komponencie.ts rok
selectRow(row) {
console.log(row);
}
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

https://material.angular.io/co ... rview
https://material.angular.io/co ... rview
Możesz dodać zdarzenie click do elementu tr, który ma atrybut mat-row i masz dostęp do wiersza względem * matRowDef = "let row;" jak pokazano niżej:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-html lang-html prettyprint-override">
<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 (string) to Twoja funkcja, która powinna zostać zapisana wewnątrz Twojego komponentu.
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Udało mi się to wykonać, dołączając zdarzenie kliknięcia [selectRow (row)] do

md-row

<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">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Ogólnie rzecz biorąc, zdarzenie kliknięcia wiersza działa

(
https://stackblitz.com/edit/an ... .html
https://stackblitz.com/edit/an ... .html
).
Tutaj w powyższym przykładzie

W tabeli-basic-example.html

(click)="test(row)"


W table-basic-example.ts

test(row){
console.log(row)
}

Konsola wyświetla wybrany obiekt wiersza tabeli.

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się