проблема видимости раскрывающихся опций при использовании с p-таблицей - PullRequest
Новая
       85

проблема видимости раскрывающихся опций при использовании с p-таблицей

0 голосов
/ 28 февраля 2020

Я использую элементы управления primeNg в своем приложении Angular 8. Я использую элемент управления primeng p-table для отображения данных. Я использую р-выпадающий также с р-таблицы. При запуске моего приложения оно выглядит следующим образом:

enter image description here

Когда я нажимаю на раскрывающийся список (откройте раскрывающийся список, чтобы увидеть параметры), он показывает только один опция как ниже:

enter image description here

Ниже мой код: 

<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-раскрывающимся списком, это решает проблему. Как ниже:

Добавление appendTo: 

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

После добавления appendTo:

enter image description here

Я не хочу использовать appendTo = "body" (по какой-то причине) для решения проблемы. Если я не использую appendTo = "body", то не могу увидеть все варианты выпадающего меню.

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Я тоже использую выпадающий список из PrimeNg, и вот как я заставляю его работать в моем случае. Я не использую appendTo.

В ваших component.ts добавьте следующее утверждение импорта: import {SelectItem} from "primeng";

Затем определите переменную этого типа, например webAcs: SelectItem[];

И переменная типа string наподобие этой: 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;
  }

После этого в вашем компоненте. html вы можете использовать следующее: 

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

Надеюсь, это вам поможет. Это прекрасно работает для меня.

0 голосов
/ 28 февраля 2020

Вы должны использовать appendTo = body. По умолчанию (без appendTo) раскрывающийся список primeng использует абсолютную позицию для списка элементов. Кажется, что таблица или ее контейнер переполнены. Вот почему вы не видите полный список выпадающих элементов - он заблокирован из-за переполнения элемента контейнера. Использование тела appendTo будет динамически добавлять список выпадающих элементов как дочерний элемент с фиксированной позицией.

...