primeng 表内的下拉菜单

Question

我在 primeng Turbo 表中使用下拉列表。我有一个由两个数组组成的数组，它们形成下拉菜单的选项。我希望第一个选项位于表格的第一行，第二个选项位于表格的第二行。我尝试使用

ngFor

但我在表格的所有行中都收到了两个下拉列表，其中包含两组选项.

这是我的 ts 代码：

arr1.push({label: "id", value: "1"});
arr2.push({label: "id", value: "2"});
masterArr.push(arr1);
masterArr.push(arr2);

这是我的模板：

<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">

            <td>{{rowData.name}}</td>
            <td>{{rowData.rollNo}}</td>

            <td>
                <p-dropdown *ngFor="let s of masterArr,let i = index" [options]="masterArr[i]" ></p-dropdown>
            </td>

        </tr>
    </ng-template>

StackBlitz：https://stackblitz.com/edit/p-table-primeng-v6-tq33vs

Answer 1

您可以将 appendTo="body" 属性添加到 p-dropdown。如果您将下拉列表放在 p-table 主体内，而不更改任何 CSS，它将解决该问题。

AppendTo 用于在 primeNG p-dropdown 中附加叠加层的目标元素

<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    ...
    <tr>
        <td>
            <p-dropdown *ngFor="let s of masterArr,let i = index" [options]="masterArr[i]" appendTo="body"></p-dropdown>
        </td>
    </tr>
</ng-template>

Answer 2

以防万一其他人到达这里时遇到了与我相同的问题，即内置分页器的下拉菜单在表格外被切断，p-table 组件上还有一个属性，这样可以在与上面表格控件中独立下拉菜单的答案类似：

<p-table paginatorDropdownAppendTo="body"/>