如何为 PrimeNG 下拉列表设置可见/不可见的组项目？

Question

当我单击组标题时，如果组中有项目，我想使组项目可见/不可见。 可以吗？

例如，我想在下拉列表中看到 3 个项目（AA，BB，CC），前 2 个选项（AA 和 BB）应该是可选的，当我单击第三个选项（CC）时，子项目（CC1，CC2，CC3） ）应该是可见的。我该怎么办？

<p-dropdown 
  [options]="groupOptions" 
  [(ngModel)]="selectedGroup" 
  placeholder="Select"
  [group]="true">
      <ng-template let-group pTemplate="group">
          <div class="flex align-items-center">   
               <span >{{ group.label }}</span>
          </div>
      </ng-template>
</p-dropdown>


groupOptions= [
    { value: '1', label: 'AA' },
    { value: '2', label: 'BB' },
    {
      label: 'CC',
      value: '3',
      items: [
        { value: '31', label: 'CC1' },
        { value: '32', label: 'CC2' },
        { value: '33', label: 'CC3' }
      ]
    }
  ];

Answer 1

我们可以使用 html、css 和逻辑的组合来实现这一点，下面是使用的样式，我们可以使用自定义类

custom-grouped-dropdown

并将它们单独作用于这个下拉列表，然后使用

::ng-deep

使其对所有人可见组件内容

::ng-deep .custom-grouped-dropdown {
  p-dropdownitem {
    padding: 0px !important;
    display: block;
  }
  .p-dropdown-item {
    padding: 0 !important;
  }
}

然后我们可以在组的每个项目上维护一个名为

hidden

的属性，并使用它来使用

*ngIf

切换数据可见性，我还添加了一个按钮来切换功能

<br /><br /><br />
<p-dropdown
  class="custom-grouped-dropdown"
  [options]="groupOptions"
  [(ngModel)]="selectedGroup"
  placeholder="Select"
  [group]="true"
>
  <ng-template let-group pTemplate="group">
    <div class="flex align-items-center justify-content-between">
      <span>{{ group.label }}</span>
      <button (click)="toggle(group)">{{!group.hidden ? '+' : '-'}}</button>
    </div>
  </ng-template>
  <ng-template let-item pTemplate="item">
    <div
      class="flex align-items-center"
      *ngIf="item.hidden"
      style="padding: 0.75rem 1.25rem !important"
    >
      <span>{{ item.label }}</span>
    </div>
  </ng-template>
</p-dropdown>

最后我创建了一个函数，它将根据切换操作更新所有子级

hidden

标志。

注意：Primeng 看起来只支持一级分组，所以我没有考虑递归

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'dropdown-basic-demo',
  templateUrl: './dropdown-basic-demo.html',
  styleUrls: ['./dropdown-basic-demo.scss'],
})
export class DropdownBasicDemo {
  selectedGroup = null;
  groupOptions = [
    {
      value: '1',
      label: 'AA',
      items: [
        { value: '31', label: 'CC1' },
        { value: '32', label: 'CC2' },
        { value: '33', label: 'CC3' },
      ],
    },
    {
      value: '2',
      label: 'BB',
      items: [
        { value: '31', label: 'CC1' },
        { value: '32', label: 'CC2' },
        { value: '33', label: 'CC3' },
      ],
    },
    {
      label: 'CC',
      value: '3',
      items: [
        { value: '31', label: 'CC1' },
        { value: '32', label: 'CC2' },
        { value: '33', label: 'CC3' },
      ],
    },
  ];

  toggle(group: any) {
    console.log(group);
    if (group?.items.length) {
      group.items.forEach((item: any) => (item.hidden = !item.hidden));
      group.hidden = !!group.items[0].hidden;
    }
  }
}

Stackblitz 演示