时间戳

首页 > 解决方案 > 与 p-table 一起使用时，primeng 下拉选项可见性问题

angular - 与 p-table 一起使用时，primeng 下拉选项可见性问题

问题描述

我在我的 Angular 8 应用程序中使用 primeNg 控件。我正在使用 primeng p-table 控件来显示数据。我也将 p-dropdown 与 p-table 一起使用。在运行我的应用程序时，它如下所示：

在此处输入图像描述

当我单击下拉菜单（打开下拉菜单以查看选项）时，它仅显示一个选项，如下所示：

在此处输入图像描述

下面是我的代码：

<p-table> 
<ng-template pTemplate="header" let-columns>
    <tr class="header-row">
        <ng-container *ngFor="let col of columns">
            <th                     
                    {{col.name}}                       
                </div>
            </th>
        </ng-container>

    </tr>       
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr [pSelectableRow]="rowData" class="data-row">
        <ng-container *ngFor="let col of columns" [ngSwitch]="col.field">
            <td *ngSwitchCase="'app'" classs="ui-resizable-column">
                {{rowData[col.field]}}
            </td>
            <td *ngSwitchCase="'status'" >
                <p-dropdown optionLabel="name" [dataKey]="'id'" [(ngModel)]="rowData.selected" [style]="{'width':'100%'}"></p-dropdown>

            </td>                
        </ng-container>
    </tr>
</ng-template>

注意： 当我将 appendTo="body" 与 p-dropdown 一起使用时，它可以解决问题。如下所示：

添加附加到：

<p-dropdown appendTo="body" optionLabel="name" [dataKey]="'id'" [(ngModel)]="rowData.selected" [style]="{'width':'100%'}"></p-dropdown>

添加 appendTo 后：

在此处输入图像描述

我不想使用 appendTo="body"（由于某种原因）来解决问题。如果我不使用 appendTo="body" 则无法查看下拉菜单的所有选项。

标签： angularprimengprimeng-datatable

解决方案

您必须使用 appendTo=body。默认情况下（没有 appendTo）primeng 下拉列表使用绝对位置作为项目列表。似乎该表或其容器已溢出。这就是为什么您看不到下拉项目的完整列表的原因 - 它被容器元素的溢出所阻止。使用 appendTo body 将动态注入下拉元素列表作为位置固定的子元素。

推荐阅读