在 Material Table 在 Angular 中将 Id 发送到按钮上的方法

Question

我有以下MaterialTable "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>

这个 table 的每一行在我通过 GET REST 调用获得的数据库中都有一个关联的 Special_Id 以及所有这些数据，但未显示在 UI 中，因此这不是此 material table 的列的一部分。

接口代码如下：

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

Material table 列的代码：

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

单击与每一行对应的操作按钮时，将调用方法 greeting(element)。我的挑战是将 Special_Id 作为参数传递给方法 'greeting'。我怎样才能做到这一点？ AngularJS 对我来说很新，我不知道该怎么做。

Answer 1

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

Answer 2

你试过了吗：

<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>

您还可以在行

上设置link

<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>

在 Material Table 在 Angular 中将 Id 发送到按钮上的方法

Sending an Id to a method on a button click in Material Table in Angular

parameter-passing

method-call

angular

angular-material-table

materialbutton