javascript p-table expandable rows -单击一行展开按钮时所有行都将展开[已关闭]

lg40wkob  于 2023-05-05  发布在  Java
关注(0)|答案(1)|浏览(140)

**关闭。**这个问题是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

jgwigjjp

jgwigjjp1#

好吧,我修好了。问题出在dataKey上。它必须是该行唯一的。我只是输入了dataKey="id",但对象没有id。对于我的数据结构,正确的方法是dataKey="report.id"

相关问题