如何从角度7的素数表中获取第一列td值

Question

尝试单击每个tr的第一个td时获得第一列表的td值。找到解决方案。

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

演示：https://stackblitz.com/edit/p-table-primeng-v6-t1k6ng?file=src/app/app.component.html

Answer 1

您应该将td包裹在ng-container中，然后将* ngFor移至该位置。检查循环索引。将点击事件处理程序添加到“ td”，然后将列号（循环索引）传递给它。

模板应该这样更新：

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

如果索引为零，则执行所需的功能。

组件应该这样更新：

handleClick(numberOfCol: number) {
  if(numberOfCol === 0) {
     console.log('First column clicked');
  }
}

正在运行的演示：https://stackblitz.com/edit/p-table-primeng-v6-admpwx