如何在 prime ng table 中单击时获取 tr 的第一个 td 值
How to get first td value of tr on click in prime ng table
如何在点击时获取 tr 的第一个 td 值 condition.If 我点击第一个 td 我想获取 angular 中的值 7.Please 不要为 tr 编写任何内联代码.我们只需要通过像 find table inside 这样的编码来使用。我们如何通过 viedchild 或元素引用使用 p-table id="dt" 来做到这一点?
演示:https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html
app.component.ts:
@ViewChild('dt') public dataTable: DataTable;
app.component.html:
<p-table id="dt" [columns]="cols" [value]="cars" [scrollable]="true" [rows]="10" [virtualRowHeight]="30" [loading]="loading"
[virtualScroll]="true" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [totalRecords]="totalRecords">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
注意:
请不要这样写内联代码:通过打字稿或 javascript.
<ng-container *ngFor="let col of cols; let i = index;">
<td (click)="handleClick(i)">
{{rowData[col.field]}}
</td>
</ng-container>
primeng table已经有选择功能,只需要设置选择模式和属性绑定选中的item
<p-table selectionMode="single" [(selection)]="selectedCar">
....
</p-table>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px" [pSelectableRow]="rowData">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
this how you set the selected item on clikc and will be boound to the
selected property that has defined by [(selection)]='...'
not this
[pSelectableRow]="rowData"
will set the holde item as selected but
you can set the selected item to just the first colume data of the tr
like this [pSelectableRow]="rowData['vin']"
检查 this 其他选择情况,例如有复选框或按钮
如何在点击时获取 tr 的第一个 td 值 condition.If 我点击第一个 td 我想获取 angular 中的值 7.Please 不要为 tr 编写任何内联代码.我们只需要通过像 find table inside 这样的编码来使用。我们如何通过 viedchild 或元素引用使用 p-table id="dt" 来做到这一点?
演示:https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html
app.component.ts:
@ViewChild('dt') public dataTable: DataTable;
app.component.html:
<p-table id="dt" [columns]="cols" [value]="cars" [scrollable]="true" [rows]="10" [virtualRowHeight]="30" [loading]="loading"
[virtualScroll]="true" (onLazyLoad)="loadCarsLazy($event)" [lazy]="true" [totalRecords]="totalRecords">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
注意: 请不要这样写内联代码:通过打字稿或 javascript.
<ng-container *ngFor="let col of cols; let i = index;">
<td (click)="handleClick(i)">
{{rowData[col.field]}}
</td>
</ng-container>
primeng table已经有选择功能,只需要设置选择模式和属性绑定选中的item
<p-table selectionMode="single" [(selection)]="selectedCar">
....
</p-table>
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of cols">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr style="height:30px" [pSelectableRow]="rowData">
<td *ngFor="let col of cols">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
this how you set the selected item on clikc and will be boound to the selected property that has defined by
[(selection)]='...'
not this[pSelectableRow]="rowData"
will set the holde item as selected but you can set the selected item to just the first colume data of the tr like this[pSelectableRow]="rowData['vin']"
检查 this 其他选择情况,例如有复选框或按钮