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 表主体内，则无需更改任何 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>