**关闭。**这个问题是not reproducible or was caused by typos。目前不接受答复。
此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这一个是解决的方式不太可能帮助未来的读者。
10小时前关闭。
Improve this question
<p-table [value]="reports" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th style="width: 5rem">Expand</th>
<th pSortableColumn="id">
id <p-sortIcon field="id"></p-sortIcon>
</th>
<th pSortableColumn="name">
name <p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="description">
description <p-sortIcon field="description"></p-sortIcon>
</th>
<th class="centeredContent" style="width: 121px" field="operations">
<button class="btn btn-success">
<i class="pi pi-refresh"></i>
</button>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-report let-expanded="expanded">
<tr>
<td>
<button
type="button"
pButton
pRipple
[pRowToggler]="report"
class="p-button-text p-button-rounded p-button-plain"
[icon]="
expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'
"
></button>
</td>
<td>{{ report.id }}</td>
<td>{{ report.name }}</td>
<td>{{ report.description }}</td>
<td>
<button
class="btn btn-warning button_icon mr-2"
ngbTooltip="View"
placement="top"
container="body"
>
<i class="pi pi-eye"></i>
</button>
<button
class="btn btn-warning button_icon"
ngbTooltip="Print"
placement="top"
container="body"
>
<i class="pi pi-print"></i>
</button>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-report>
<tr>
<td colspan="7">
<div class="p-3">
<p-table [value]="report.kpiList" dataKey="id">
<ng-template pTemplate="header">
<tr>
<th pSortableColumn="id">
Id <p-sortIcon field="id"></p-sortIcon>
</th>
<th pSortableColumn="name">
name <p-sortIcon field="name"></p-sortIcon>
</th>
<th pSortableColumn="code">
code <p-sortIcon field="code"></p-sortIcon>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-kpi>
<tr>
<td>{{ kpi.id }}</td>
<td>{{ kpi.name }}</td>
<td>{{ kpi.code }}</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td colspan="3">No data.</td>
</tr>
</ng-template>
</p-table>
</div>
</td>
</tr>
</ng-template>
</p-table>
我尝试使用PrimeNg p-table组件创建一个具有可扩展行的表。我基本上是从PrimeNg网站上复制代码,只是调整了列和数据。当我单击展开行按钮时,表中的所有行都展开了,这是不应该的。只有我单击的行应该展开。控制台未显示错误。我在网上找过,但找不到解决办法。Angular版本:15.2.1 PrimeNg版本:15.2.0
1条答案
按热度按时间jgwigjjp1#
好吧,我修好了。问题出在dataKey上。它必须是该行唯一的。我只是输入了
dataKey="id"
,但对象没有id。对于我的数据结构,正确的方法是dataKey="report.id"
。