Question

我正在尝试添加类似于多选的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下拉列表创建页脚？？

Answer 1

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-drowndown有关以隐藏选项列表

组件

  handler() {
    // show create dialog 
  }

demo ??

如何在primeng中为p下拉列表添加页脚？

1 个答案: