我在想如何在PrimeEng中使用行扩展。我只是按照他们的文档中的指南，它表明我应该定义我的数据键。我已经在下面定义了它，如果我没有弄错的话。我是新手，请不要评判。
<p-table [value]="users" [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 (click)="viewPostUser(user.id)" class="p-button-text p-button-rounded p-button-plain" ></button> -->
<button type="button" pButton pRipple [pRowToggler]="posts" (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>这是我的行扩展ng-template。
<ng-template pTemplate="rowexpansion" let-posts>
<tr>
<td colspan="7">
<div class="p-p-3">
<p-table [value]="posts.userId" [dataKey]="posts.userId">
<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>
</tr>
</ng-template>
<ng-template pTemplate="body" let-posts>
<tr>
<td>{{posts.userId}}</td>
<td>{{posts.id}}</td>
<td>{{posts.title}}</td>
<td>{{posts.body}}</td>
<td><p-button type="button" icon="pi pi-search"></p-button></td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>我已经尝试搜索我的错误，但它指向我更新版本。
4条答案
按热度按时间gg0vcinb1#
我想这就是你搞错的地方：
所以最后的代码是：
rta7y2nd2#
首先，要修复您看到的错误，请将属性
dataKey="id"添加到p-table元素。接下来，使用
let-posts可能不是您想要的。你没有写你的数据结构是如何构造的，但我假设每个用户都有一个名为posts的属性。你需要像这样修改你的模板：说明：
1.在行展开模板中使用
let-user。现在，user变量将包含当前可展开行的用户数据。1.在内部
p-table中，为[value]输入提供子表的数据，即当前用户的帖子。1.在内部
p-table中，为dataKey输入提供字段的名称，该字段是表的唯一键。这在你的情况下可能是不必要的。1.在内部
p-table中，在body模板中，使用let-post而不是let-posts，因为每次迭代，即显示用户帖子的内部表的每一行，将存储当前行，这是一个帖子。1.在内部表主体模板的每个
<td>元素中，使用post.<field-name>。post将包含当前行的数据，因此您需要做的就是访问对象中所需的字段。mbzjlibv3#
您可以在第一行添加dataKey，如下所示
也许它会解决你的问题。
avkwfej44#
您应该使用对象的属性将dataKey添加到第一个/上一个表（在本例中为“users”）
这个方法对我很有效。