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>

Primeng表中的下拉菜单

1 个答案: