web-dev-qa-db-ja.com

angularマテリアルテーブルのmat-rowにクリックイベントを追加する方法

これを追加しましたが、Chrome DevToolsを使用して要素を検査すると、クリック機能が表示されません！

私のコードは次のとおりです。

  <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

上記とほぼ同じソリューションですが、クリックした行からオブジェクトを取得しようとしている場合はもう少し便利です

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

行をコンソールログに記録すると、行のオブジェクト全体が取得されます

28
Jonathan Meguira

*matRowDefを見て、行変数を作成しましたが、クリックイベントでは要素1を指定しています。

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

それ以外の場合、それを検査していることは表示されません：AngularはJSでイベントリスナーを作成してイベントを処理します。 HTMLまたはJavascriptのいずれかで作成でき、Javascriptで作成することを選択します。コンソールログで機能をテストするだけで、機能するはずです。

6
Maryannah

一般に、行のクリックイベントは機能します（ https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html ）。

element.objnameはそのスコープでは定義されていません。 let row;の名前をlet elementに変更する必要があります。

2
Shadowlauch