时间戳

首页 > 解决方案 > 如何在primeng中为p-dropdown添加页脚？

angular - 如何在primeng中为p-dropdown添加页脚？

问题描述

我正在尝试添加p-dropdown类似于多选的页脚，但它不起作用。

<p-dropdown [options]="genes" formControlName='geneId' appendTo="body">
    <p-footer>
        <button type="button" pButton  iconPos="right" icon="pi pi-fw pi-chevron-right" label="Create New Gene" ></button>
    </p-footer>
</p-dropdown>

下拉菜单没有使用上面的代码显示，但它在multiselect下面显示。我想用下拉菜单做到这一点。

<p-multiSelect [options]="genes" formControlName='geneId' appendTo="body" [selectionLimit]="1">
    <p-footer>
        <button type="button" pButton  iconPos="right" icon="pi pi-fw pi-chevron-right" label="Create New Gene" ></button>
    </p-footer>
</p-multiSelect>

如何为 p-dropdown 创建页脚。？

标签： angularbootstrap-4primeng

解决方案

p-dropdown 组件不支持添加页脚部分，但我们可以设法像这样伪造页脚部分

<p-dropdown [(ngModel)]="selectedValue" [options]="cities1" appendTo="body" #dd>
        <ng-template let-option pTemplate="item" >
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">

          <button *ngIf="option.value == 0; else selecteItem" 
              type="button" pButton  iconPos="right" 
              icon="pi pi-fw pi-chevron-right" 
              label="Create New Gene" 
              (click)="handler();dd.hide()">
          </button >

          <ng-template #selecteItem>
            <div style="font-size:14px;">
              {{option.label}} 
              </div>

          </ng-template>
        </div>
    </ng-template>
</p-dropdown>

您可以设置自己的条件也可能是标签的基础option.value == 0，dd.hide() 与 p-drowdown 相关以隐藏选项列表

零件

  handler() {
    // show create dialog 
  }

演示

推荐阅读