在 Angular 的材料表中单击按钮上的方法将 ID 发送到方法

Posted 2023-04-19

【中文标题】在 Angular 的材料表中单击按钮上的方法将 ID 发送到方法

【英文标题】：Sending an Id to a method on a button click in Material Table in Angular

【发布时间】：2020-09-12 05:07:10

【问题描述】：

我有以下材料表 “Action”的代码如下：

    <ng-container matColumnDef="Action">
      <th mat-header-cell *matHeaderCellDef> Action</th>
        <td mat-cell *matCellDef="let element">
          <i class="material-icons mat-icon-button" (click)="greeting(element)">open_in_new</i> </td>
  </ng-container>

该表的每一行在数据库中都有一个关联的 Special_Id此物料表的列。

接口代码如下：

export interface PeriodicElement 
  special_id:string;
  name: string;
  position: number;
  weight: number;
  symbol: string;

材料表列代码：

displayedColumns: string[] = ['position', 'name', 'weight', 'symbol','Action'];

点击每一行对应的Action Button，就会调用一个方法greeting(element)。我的挑战是将 Special_Id 作为参数传递给方法“问候”。我怎样才能做到这一点？ AngularJS 对我来说很新，我不知道该怎么做。

【问题讨论】：

问候（element.special_id）？

【参考方案1】：

你试过了吗：

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element">
    <i class="material-icons mat-icon-button" 
       (click)="greeting(element.special_id)">
      open_in_new
    </i> 
  </td>
</ng-container>

也可以在行上设置链接

<ng-container matColumnDef="Action">
  <th mat-header-cell *matHeaderCellDef> Action</th>
  <td mat-cell *matCellDef="let element" (click)="greeting(element.special_id)">
    <i class="material-icons mat-icon-button">
      open_in_new
    </i> 
  </td>
</ng-container>

【参考方案2】：

尽管 special_id 不是列数组的一部分，但您的元素是具有该字段的对象。所以你可以直接将它作为参数传递，你的 id 将被传递给方法。只需调用 greeting(element.special_id)