Question

试图在单击每个tr的第一个td时获取第一列表的td值。我尝试但不工作，我知道如何用jquery编写，但我不知道如何用angular 7编写。如果有人知道，请帮助我找到解决办法。

<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中，以便可以将点击事件添加到td中。
将*ngFor移动到ng-container。
将点击事件处理程序添加到“ 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

Answer 2

您可以在第一列上添加点击事件：

  <td (click)="doSomething(rowData)">{{ rowData['vin'] }}</td>

和

  doSomething(row) {
    this.cellClicked = row["vin"];
  }

查看有效的demo

如何从角度7的原始ng表中获取第一列td值

2 个答案: