Javascript 如何在prime ng表中单击时获取tr的第一个td值

如何在点击条件下获得tr的第一个td值。如果我点击第一个td，我想获得angular 7中的值。请不要为tr编写任何内联代码。我们只需要通过像find table inside这样的编码来使用。我们如何通过viedchild或元素引用使用p-table id=“dt”来实现

演示：

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> 

{{col.header}}
{{rowData[col.field]}

注: 请不要这样写内联代码：用typescript或javascript来写

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

{{rowData[col.field]}

预处理表已经有一个选择功能，只需设置选择模式和属性即可绑定所选项目

....

{{col.header}}
{{rowData[col.field]}

这是您在clikc上设置所选项目的方式，并将在 已由

[（选择）]='…'

定义的选定属性不是此属性

[pSelectableRow]=“rowData”

将holde项目设置为选中，但 您可以将所选项目仅设置为tr的第一列数据 像这样

[pSelectableRow]=“rowData['vin']”

检查

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