Question

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

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

下面是我的代码：

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

注意： 当我在p-dropdown中使用appendTo =“ body”时，它可以解决此问题。就像下面这样：

添加appendTo：

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

添加appendTo之后：

由于某些原因，我不想使用appendTo =“ body”来解决此问题。如果我没有使用appendTo =“ body”，则无法查看下拉菜单的所有选项。

Answer 1

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

Answer 2

我也使用了primeNg的下拉列表，这就是我使用它的方式。我不使用appendTo。

在您的component.ts中添加以下导入语句： import {SelectItem} from "primeng";

然后定义一个类型为webAcs: SelectItem[];

的变量

还有一个字符串类型的变量，例如：webAcsSelected: string = "";

在构造函数中，您可以按以下方式对其进行初始化：

this.webAcs = [];
this.webAcs.push({label: '', value: ''});
this.webAcs.push({label: 'Successful', value: 'Successful'});
this.webAcs.push({label: 'Unsuccessful', value: 'Unsuccessful'});

您还可以为值定义int，但这取决于您的需求。如果是int，变量webAcsSelected也应该是int类型，并且应初始化为0。请注意，在此示例中，您将拥有3个值，而第一个为空，因此如果出现以下情况，用户也可以将下拉菜单中的选择保留为空需要。如果是int值，则第一个条目的值应为0。如果您不需要/不希望这样做，则只需删除第一个条目即可。

实施如下方法：

webAcsChange(event){
    this.webAcsSelected = event.value;
  }

完成后，可以在component.html中使用以下内容：

<p-dropdown [options]="webAcs" (onChange)="webAcsChange($event)" [(ngModel)]="webAcsSelected"></p-dropdown>

我希望这会对您有所帮助。对我来说很棒。

与p表结合使用primeng下拉选项可见性问题

2 个答案: