如何实现PrimeNG下拉框分组项的显示/隐藏功能？

完全可以实现这个需求，你需要自定义下拉面板内容，手动控制分组的展开/折叠状态，具体修改如下：

1. 调整选项数据结构 #

给分组项添加expanded属性，用来跟踪当前分组的展开状态：

groupOptions = [
    { value: '1', label: 'AA' },
    { value: '2', label: 'BB' },
    {
      label: 'CC',
      items: [
        { value: '31', label: 'CC1' },
        { value: '32', label: 'CC2' },
        { value: '33', label: 'CC3' }
      ],
      expanded: true // 初始设为展开，改成false则默认折叠
    }
  ];

2. 修改下拉框模板 #

去掉默认的[group]="true"，改用pTemplate="content"自定义整个下拉面板，实现分组头点击切换、子项按需显示：

<p-dropdown 
  #dropdown
  [(ngModel)]="selectedGroup" 
  placeholder="Select"
  [style]="{minWidth: '150px'}">
    <!-- 自定义下拉面板内容 -->
    <ng-template pTemplate="content">
        <div class="p-dropdown-items">
            <ng-container *ngFor="let option of groupOptions">
                <!-- 普通可选项（无嵌套子项） -->
                <div *ngIf="!option.items" class="p-dropdown-item" (click)="selectOption(option)">
                    {{ option.label }}
                </div>
                <!-- 分组项 -->
                <div *ngIf="option.items">
                    <!-- 分组头部，点击切换展开状态 -->
                    <div class="p-dropdown-group-header flex align-items-center" (click)="option.expanded = !option.expanded">
                        <span>{{ option.label }}</span>
                        <i class="pi ml-auto" [ngClass]="option.expanded ? 'pi-chevron-down' : 'pi-chevron-right'"></i>
                    </div>
                    <!-- 分组子项，根据展开状态显示/隐藏 -->
                    <div *ngIf="option.expanded" class="p-dropdown-items">
                        <div *ngFor="let item of option.items" class="p-dropdown-item pl-4" (click)="selectOption(item)">
                            {{ item.label }}
                        </div>
                    </div>
                </div>
            </ng-container>
        </div>
    </ng-template>
</p-dropdown>

3. 补充组件逻辑 #

添加选择选项的方法，同时获取下拉框实例来实现选择后关闭面板：

import { Component, ViewChild } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  selectedGroup: any;
  groupOptions = [/* 上面定义的数组 */];
  
  @ViewChild('dropdown') dropdown!: Dropdown;

  selectOption(option: any) {
    this.selectedGroup = option;
    this.dropdown.toggle(); // 选择后关闭下拉面板
  }
}

4. 补充样式（可选） #

添加少量样式保持和PrimeNG默认风格一致，比如子项缩进：

.p-dropdown-group-header {
  padding: 0.5rem 1rem;
  cursor: pointer;
  user-select: none;
}

.p-dropdown-group-header:hover {
  background-color: var(--surface-hover);
}

.pl-4 {
  padding-left: 2rem;
}

效果说明 #

• AA、BB作为普通选项可直接点击选择
• 点击CC分组头部会切换展开/折叠状态，同时图标同步变化
• 展开后可选择CC1、CC2、CC3子项，选择后下拉面板自动关闭

内容的提问来源于stack exchange，提问作者alinz