javascript - วิธีการดึงค่าของ td แรกของ tr เมื่อคลิกในตาราง prime ng

วิธีการรับค่าของ td แรกของ tr เมื่อเกิดเงื่อนไขคลิก ถ้าฉันคลิก td แรกฉันต้องการรับค่าของมันใน Angular 7 กรุณาอย่าเขียนโค้ดแบบ inline สำหรับ tr เราต้องการใช้เฉพาะการเขียนโค้ด เช่น การค้นหา table ภายใน เราจะทำได้อย่างไรโดยใช้ p-table id="dt" ด้วย ViewChild หรือ element reference?

สาธิต: 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>

คำตอบ #1

ตาราง primeng มีฟีเจอร์การเลือกอยู่แล้ว เพียงแค่ตั้งค่าโหมดการเลือกและคุณสมบัติที่จะผูกกับรายการที่ถูกเลือก

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

นี่คือวิธีที่คุณตั้งค่ารายการที่เลือกเมื่อคลิก และจะถูกผูกกับคุณสมบัติ selected ที่ได้ถูกกำหนดโดย [(selection)]='...' ไม่ใช่ [pSelectableRow]="rowData" ซึ่งจะตั้งค่ารายการทั้งหมดเป็นรายการที่เลือก แต่คุณสามารถตั้งค่ารายการที่เลือกให้เป็นเพียงข้อมูลคอลัมน์แรกของ tr ได้แบบนี้ [pSelectableRow]="rowData['vin']"

เดโม ⚡

ตรวจสอบ 👉 สิ่งนี้สำหรับกรณีการเลือกอื่น ๆ เช่น มีช่องทำเครื่องหมายหรือปุ่ม