底漆表内的下拉菜单答案

【问题标题】：Dropdown inside primeng table底漆表内的下拉菜单
【发布时间】：2019-05-08 12:07:02
【问题描述】：

我在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

【问题讨论】：

为它创建一个堆栈闪电战。
@MaihanNijat 我添加了 stackblitz。如您所见，我得到了两个下拉菜单，而我希望每一行都有一个下拉菜单
你想要颜色列下的颜色下拉列表和品牌列下的品牌下拉列表吗？或发布屏幕截图您希望如何显示它。
不清楚您到底在寻找什么？
我想迭代主 Arr 并从每个子数组中构造一个下拉列表。所以如果我在 masterArray 中有 2 个数组，我希望第一个下拉列表转到表的第一行并且第二个进入第二行。

标签： angular typescript primeng primeng-turbotable

【解决方案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>

【讨论】：