Angular Material- 从点击的行元素获取 id

Question

我想在单击 Angular Material table...

中的按钮时获取行 ID 和单击的元素 ID

我点击了元素 ID，但该行的 ID 未显示 undefined。如何获取组件中的id？

HTML

<table     mat-table [dataSource]="dataSource" matSort matTableResponsive>

  <!-- ID Column -->
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
    <td mat-cell *matCellDef="let row let i=index;"> {{ i+1}} 

    </td>
  </ng-container>



  <ng-container matColumnDef="amount">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Amount </th>
    <td mat-cell *matCellDef="let row"> {{row.amount}} </td>
  </ng-container>
  <ng-container matColumnDef="discount">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Discount </th>
    <td mat-cell *matCellDef="let row"> {{row.discount}} </td>
  </ng-container>
  <ng-container matColumnDef="total">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Total </th>
    <td mat-cell *matCellDef="let row"> {{row.total}} </td>
  </ng-container>
  <ng-container matColumnDef="orderStatus">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Change Status</th>
    <td mat-cell *matCellDef="let row"> 

      <button mat-button color="accent" [matMenuTriggerFor]="menustatus"> {{row.orderProcess.orderStatus}}</button></td> 

    <mat-menu  #menustatus="matMenu">
      <button  (click)="changestatus($event,row)" mat-menu-item [value]="os.id" *ngFor="let os of orderprocessing">{{os.name}}</button>

    </mat-menu>
  </ng-container> 

</table>

在最后一列中，我从 API 中获取菜单，例如 ordered,shipped 等等...

组件

changestatus(e:any,row:any)
{
  console.log(e.target.value);
  console.log(row);
}

在我的第二个控制台中，我得到 undefined。

如何获取单个onclick函数中的id？

Answer 1

怀疑上面的 HTML 代码，看起来你在 mat-button 元素之后关闭了 </td>。

因此，<mat-menu> 按钮无法访问 row 值，因为它不在 <td> 范围内。

<td mat-cell *matCellDef="let row"> 
                  
    <button mat-button color="accent" [matMenuTriggerFor]="menustatus"> {{row.orderProcess.orderStatus}}</button>
</td> 
              
    <mat-menu  #menustatus="matMenu">
        <button  (click)="changestatus($event,row)" mat-menu-item [value]="os.id" *ngFor="let os of orderprocessing">{{os.name}}</button>
               
   </mat-menu>

解决方案

将 <mat-menu> 元素放在 <td> 元素中。

<td mat-cell *matCellDef="let row">
  <button mat-button color="accent" [matMenuTriggerFor]="menustatus">
    {{row.orderProcess.orderStatus}}
  </button>

  <mat-menu #menustatus="matMenu">
    <button
      (click)="changestatus($event,row)"
      mat-menu-item
      [value]="os.id"
      *ngFor="let os of orderprocessing"
    >
      {{os.name}}
    </button>
  </mat-menu>
</td>

Sample Demo on StackBlitz

Angular Material- 从点击的行元素获取 id

Angular Material- Getting id from clicked row element

html

angular

angular-material

angular-material-table

解决方案