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

观看您的*matRowDef，您创建了一个行变量，但在您的点击事件中，您将提供一个元素。

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

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

Answer 3

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

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

Answer 4

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

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

您应创建一条路径以匹配链接，例如：

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

如果要从ngOnInit下组件中的URL获取ID，请像下面这样使用ActivatedRoute：

 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+'===============');
      }
  })
 }

Answer 5

我宁愿像这样向物料表添加一个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

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

5 个答案: