从角度 4 材料数据表中的行中获取对象 ID

Question

我有一个数据表，几乎就像材料 2 页面上的示例一样。

<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<table mat-table class="w100" #table matSort [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="branch">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Standort </th>
<td mat-cell *matCellDef="let item"> {{item.branch}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="contractName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Vertrag </th>
<td mat-cell *matCellDef="let item"> {{item.contractName}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="costPerMonth">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Kosten (p.M.) </th>
<td mat-cell *matCellDef="let item"> {{item.costPerMonth}}€ </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="remainingTerm">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Restlaufzeit </th>
<td mat-cell *matCellDef="let item"> {{item.remainingTerm}} </td>
</ng-container>
<ng-container matColumnDef="lastVisit">
<th mat-header-cell *matHeaderCellDef mat-sort-header> letzter Besuch </th>
<td mat-cell *matCellDef="let item"> {{item.lastVisit | date:'dd.MM.yyyy'}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="getRecord(row.id)"></tr>
</table>
<mat-paginator #paginator [pageSize]="10" [pageSizeOptions]="[5, 10, 20]" [showFirstLastButtons]="true"></mat-paginator>
</div>

单击特定行时如何从元素中获取对象 ID？我需要触发一个点击函数，其中包含下一个函数的这个 id，但我在堆栈溢出或谷歌中没有找到任何关于它的内容。

Answer 1

我假设 ObjectId 是指项目上的一个名为 id 的属性。在这种情况下，您的表中似乎已经有了此功能。

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

"(点击("部分响应表格中某一行的点击事件。如果单击一行，将执行getRecord(row.id(函数。此处 id 需要是表中显示的对象的属性。因此，在您的情况下，属性 item.id 需要存在于您的物品上。

您可以通过将这样的函数放在 ts 文件中来轻松测试这是否有效：

getRecord(rowId: number) {
console.log(rowId);
}

并检查是否正确的 ID 打印到您的控制台。