如何在角度材质表的mat-row上添加click事件

Question

我添加了这个但是在使用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>

Answer 1

几乎与上面相同的解决方案,但如果您尝试从单击的行中获取对象,则会更有用

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

当您控制台记录该行时,您将获得该行的整个对象

Answer 2

如果某些机构需要使用路由器链接，您可以像下面这样：

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

您应该创建一个路由来匹配链接，例如：

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

如果您想从组件中的 url 获取 id，请在 ngOnInit 下使用 ActivatedRoute 如下所示：

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

ngOnInit() {
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);
    }
 })
}

Answer 3

观看您的*matRowDef，您创建了一个行变量，但是在click事件中，您正在给元素一个。

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

否则，您将不会看到它正在检查它：Angular在JS中创建事件侦听器来处理events。您可以用HTML或Javascript来创建它，而他们选择用Javascript来做。只需使用控制台日志测试您的功能，它就可以工作。

Answer 4

一般来说，行上的单击事件有效（https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html）。

未element.objname在该范围内定义。你必须重命名let row;为let element.