PrimeNG行展开报错：dataKey必须定义，求解决方案

你遇到的报错核心原因是主表格未配置dataKey，同时还有几处绑定错误需要修正，具体如下：

错误点及修正方案 #

• 主表缺少dataKey：PrimeNG行展开功能依赖主表的唯一标识字段跟踪展开状态，给主<p-table>添加[dataKey]="'id'"（你的用户对象用id作为唯一标识）。
• 行展开按钮绑定错误：[pRowToggler]应该绑定当前行的user对象，而非posts。
• 子表格数据绑定错误：子表的[value]应绑定当前用户对应的帖子数组（比如你通过viewPostUser获取的该用户posts列表），dataKey用帖子的id作为唯一标识，而非posts.userId。

修正后的完整代码 #

主表格部分 #

<p-table [value]="users" [dataKey]="'id'" [paginator]="true" [rows]="10" [showCurrentPageReport]="true"
    currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
    [rowsPerPageOptions]="[10, 25, 50]">
   
<ng-template pTemplate="header">
    <tr>
        <th style="width:2rem">blank</th>
        <th style="width:1rem">ID</th>
        <th style="width:8rem">Name</th>
        <th style="width:8rem">Username</th>
        <th style="width:8rem">Email</th>
        <th style="width:8rem">Street</th>
        <th style="width:8rem">Suite</th>
        <th style="width:8rem">City</th>
        <th style="width:8rem">Zip code</th>
        <th style="width:8rem">LAT</th>
        <th style="width:8rem">LNG</th>
        <th style="width:8rem">Phone</th>
        <th style="width:8rem">Website</th>
    </tr>
</ng-template>

<ng-template pTemplate="body" let-user let-expanded="expanded">
    <tr>
        <td>
            <button type="button" pButton pRipple [pRowToggler]="user" (click)="viewPostUser(user.id)" class="p-button-text p-button-rounded p-button-plain" [icon]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></button>
        </td>
        <td>{{user.id}}</td>
        <td>{{user.name}}</td>
        <td>{{user.username}}</td>
        <td>{{user.email}}</td>
        <td>{{user.address.street}}</td>
        <td>{{user.address.suite}}</td>
        <td>{{user.address.city}}</td>
        <td>{{user.address.zipcode}}</td>
        <td>{{user.address.geo.lat}}</td>
        <td>{{user.address.geo.lng}}</td>
        <td>{{user.phone}}</td>
        <td>{{user.website}}</td>
    </tr>
</ng-template>

行展开模板部分 #

<!-- 假设你在组件内将当前用户的帖子列表存储到了userPosts变量中 -->
<ng-template pTemplate="rowexpansion" let-user>
    <tr>
        <td colspan="13">
            <div class="p-p-3">
                <p-table [value]="userPosts" [dataKey]="'id'">
                    <ng-template pTemplate="header">
                        <tr>
                            <th style="width:4rem">userID</th>
                            <th style="width:4rem">ID</th>
                            <th style="width:4rem">Title</th>
                            <th style="width:4rem">Body</th>
                            <th style="width:4rem">Action</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-post>
                        <tr>
                            <td>{{post.userId}}</td>
                            <td>{{post.id}}</td>
                            <td>{{post.title}}</td>
                            <td>{{post.body}}</td>
                            <td><p-button type="button" icon="pi pi-search"></p-button></td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </td>
    </tr>
</ng-template>

额外说明：

• 行展开模板的let-user接收当前展开的用户对象，你需要在viewPostUser(user.id)方法中根据用户ID获取对应的帖子列表，存入组件变量（比如userPosts）供子表使用。
• 子表的colspan要与主表列数一致（主表共13列，所以设为13），避免布局错乱。

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