web-dev-qa-db-ja.com

マテリアルデザインmdテーブルで選択したテーブル行をキャプチャする方法

選択した行をキャプチャできる必要があるという要件があります[ユーザーは行の任意の場所をクリックできます]。ドキュメントを調べました https://material.angular.io/components/table/overview ですが、選択した行とその内容をキャプチャする方法が見つかりませんでした。 md-tableタグにクリックイベントを添付しようとしましたが、機能しませんでした。

<md-table #table [dataSource]="tableDataSource" (click)="selectRow(row)">
angularmaterial-design
18
nsk

私はそれをこうして機能させることができました：

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

およびcomponent.ts

  selectRow(row) {
      console.log(row);
  }
22
Joshua Craven

https://material.angular.io/components/table/overview

Mat-row属性を持つtr要素にクリックイベントを追加でき、* matRowDef = "let row;"に関する行にアクセスできます。以下のように：

    <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）は、コンポーネント内に記述する必要がある関数です。

12
Jalaleddin Hosseini

代わりにmd-rowのクリックイベント[selectRow（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">
1
nsk

一般に、行のクリックイベントは機能します

（ https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html ）。

上記の例では

table-basic-example.html

(click)="test(row)"

table-basic-example.ts

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

コンソールでは、選択したテーブル行オブジェクトが表示されます。

0
Srinivasan N