Angular Material- 从点击的行元素获取 id
Angular Material- Getting id from clicked row element
我想在单击 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?
怀疑上面的 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>
我想在单击 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?
怀疑上面的 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>