如何在PrimeNG的p-table中为表格行动态分配唯一ID

你当前写法失效的原因是id=i属于静态HTML属性赋值，只会把i作为普通字符串渲染到ID上，不会绑定Angular模板上下文里的index变量。

修改方案 #

使用Angular属性绑定语法，用方括号包裹id属性即可完成动态值绑定：

<ng-template pTemplate="body" let-rowData let-columns="columns" let-i="index">
    <tr [id]="i">
        <td *ngFor="let col of columns">
            {{rowData[col.field]}}
        </td>
    </tr>
</ng-template>

如果需要避免ID和页面其他元素重复，可添加固定前缀拼接：

<tr [id]="'p-table-row-' + i">

补充建议：如果行数据本身带有唯一业务标识（如数据自增ID、业务编号等字段），优先使用业务字段作为ID值。排序、分页、筛选等表格操作会导致行的index动态变动，业务ID的稳定性更强，示例如下：

<tr [id]="'p-table-row-' + rowData.id">

内容的提问来源于stack exchange，提问作者Tony