如何在prime ng表中单击时获得tr的第一个td值答案

【问题标题】：How to get first td value of tr on click in prime ng table如何在prime ng表中单击时获得tr的第一个td值
【发布时间】：2019-12-09 19:37:30
【问题描述】：

如何在点击条件下获取 tr 的第一个 td 值。如果我单击第一个 td，我想获取角度 7 中的值。请不要为 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>

注意：请不要这样写内联代码：通过 typescript 或 javascript 来编写。

<ng-container *ngFor="let col of cols; let i = index;">
  <td (click)="handleClick(i)">
     {{rowData[col.field]}} 
  </td>
</ng-container>

【问题讨论】：

标签： javascript typescript angular7 primeng primeng-datatable

【解决方案1】：

primeng table已经有了选择功能，只需要设置选择模式和属性就可以绑定选中项

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

这是您在 clikc 上设置所选项目的方式，并将绑定到 [(selection)]='...' 定义的选定属性不是这个 [pSelectableRow]="rowData" 将保持项目设置为选中但您可以将所选项目设置为 tr 的第一个列数据像这样[pSelectableRow]="rowData['vin']"

demo ⚡

检查 ? this 是否有其他选择案例，例如有复选框或按钮

【讨论】：