如何在角材料表的垫行上添加点击事件答案

【问题标题】：How to add click event on mat-row in angular material table如何在角材料表的垫行上添加点击事件
【发布时间】：2018-06-18 05:50:07
【问题描述】：

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

【问题讨论】：

标签： angular typescript angular-material

【解决方案1】：

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

<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);
    }
 })
}

【讨论】：

如果我在每一行中都有一个 mat-icon-button 用于附加操作，该怎么办？单击该图标时，如何防止触发路由器（应该打开一个下拉菜单？
在你的图标中添加这个：(click)="$event.stopPropagation()"
啊，完美。非常感谢:)

【解决方案2】：

我更愿意将 formControl 添加到材料表中

<mat-table matSort
             [formControl]="formControl"
             ...
             >
       ....
</mat-table>

然后在我的 ngOnInit 方法中使用

readonly formControl = new FormControl();

ngOnInit(): void {
    this.formControl.valueChanges.subscribe((request: RequestViewModel) => {
      this.selectedInvestigationId(request.investigation.investigationInfoId, request.speciality);
    });
  }

好处很多：

它将与键盘导航一起使用（formControl 将选择与 SPACE/ENTER/单击同等对待）。
可以使用表单验证
您可以使用表单标志，例如 ng-dirty

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

谢谢这是否记录在某处？我想知道您返回的对象的类/类型等。
如何获取行数据到另一个组件变量？
类/类型是您的项目的类型。没有必要做类似row.data 的事情。事实上，我发现将 let customer 而不是 let row 放在更易读，然后你的事件变为 (click)="selectCustomer(customer.id) 或类似的东西。

【解决方案4】：

注意你的*matRowDef，你创建了一个行变量，但是在你的点击事件中，你给了一个元素。

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

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

【讨论】：

【解决方案5】：

通常，行上的点击事件有效 (https://stackblitz.com/edit/angular-nmb2x1?file=app/table-basic-example.html)。

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

【讨论】：