时间戳

首页 > 解决方案 > 如何在 MatTable 行上实现 OnClick 操作？

html - 如何在 MatTable 行上实现 OnClick 操作？

问题描述

我想在参考行上实现 OnClick。如果我单击用户 1 的行，我想查看用户 1 的详细信息 例如，如果我单击用户 1 的行，我想访问存储在该用户 1 的行中的信息。

这是html文件：

<table mat-table [dataSource]="dataSource">
   <ng-container matColumnDef="country">
       <th mat-header-cell *matHeaderCellDef> Country </th>
       <td mat-cell *matCellDef="let element"> {{element.country}} </td>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
   <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onClick(row)" >{{row.onClickAction}}</tr>
</table>

这是 ts 文件：

export class AppComponent {
    onClickAction = '';
    onClick(){
        this.onClickAction = 'Action';
    }
}

标签： htmlangulartypescriptangular-material

解决方案

像这样尝试，现在您将可以访问行数据并使用router服务导航到另一个组件。

模板 

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

零件 

export class AppComponent {

  constructor(private _router: Router) {}

  clickHandler(row) {
       this._router.navigateByUrl(`user/${row.id}`);
       console.log(row)
  }

}

细节组件 

export class DetailComponent implements OnInit {

  public selectedUserId : string;
  constructor(private _activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this._activatedRoute.params.subscribe(params => {
      this.selectedUserId = params.id;
    })
  }

}

演示

更新了‍♂️</p>

如果您想在路由之间发送复杂对象，您可以使用共享服务（单例服务），或者如果您使用 Angular 版本 7.3 及更高版本导航接受另一个参数类型NavigationExtras具有称为状态的属性，稍后接受对象，我们导航到目标组件，我们可以从历史对象中获取状态值window.history.state

掌握

  clickHandler(row) {
   this._router.navigate([`details`,row.position] , {state:{...row} }); 
  }

细节

 this.user = window.history.state;

您可以使用window.history.state或路由器服务来获取状态值

演示☕☕

推荐阅读