How to add click event on mat-row in angular material table

问题

I added this but when inspecting element using Chrome DevTools, the click function doesn't show!

Here's my code:

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

回答1:

almost the same solution as above but a bit more useful if you are trying to get the object from the clicked row

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

when you console log the row you will get the entire object of the row

回答2:

Watch your *matRowDef, you created a row variable, yet in your click event, you're giving an element one.

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

Otherwise, you won't see it be inspecting it : Angular creates event listeners in JS to handle events. You can either create it in HTML or in Javascript, they choose to do it in Javascript. Just test your function with a console log, it should work.

回答3:

In general a click event on the row works (https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html).

The element.objname is not defined in that scope. You have to rename let row; to let element.

回答4:

If some body needs to use a router link you can do it like bellow:

       <tr mat-row *matRowDef="let element; columns: displayedColumns" [routerLink]="['/newsfeed/editnews/', element.NewsfeedID]"></tr>

you should create a route to match the link for example:

 const routes: Routes = [
    {
         path:'editnews/:newsfeedid', component:NewsfeedformComponent
     }
 ]

if you want to get the id from url in your component under in ngOnInit use ActivatedRoute like bellow:

 import { ActivatedRoute } from '@angular/router';

 ngOnInit(){
            //----------for edit-----------------//
this._activatedRoute.paramMap.subscribe(params => {
//---in the route we created edit route we set newsfeedid as param so we get it here---//
    const NewsfeedID = +params.get('newsfeedid');
    if (NewsfeedID) {
        //this.getAgentbyid(agentid);
        console.log('==============>'+NewsfeedID+'===============');
      }
  })
 }

来源：https://stackoverflow.com/questions/48164039/how-to-add-click-event-on-mat-row-in-angular-material-table

标签

angular

typescript

angular-material