当超过 p-treeSelect 的宽度时显示计数而不是标签

Question

我正在使用 PrimeNG 13.4.1 编写一个 angular14 项目

我使用带有复选框的 p-treeSelect 组件，以便用户能够 select 根节点和 select 多个项目。

我想要实现的是，如果用户 select 编辑了 5 个元素，而不是让用户看到大部分被裁剪的芯片，而是查看他 select 问题的数量 selected.

这是我的数据：

apartmentsTypesObj: any[] =
      [
        {
          "label": "Apartments",
          "data": "Apartments",
          "expandedIcon": "pi pi-folder-open",
          "collapsedIcon": "pi pi-folder",
          "children": [{
            "label": "Apartment",
            "data": "Apartment",
            "icon": "pi pi-file",
          },
            {
              "label": "Garden Apartment",
              "data": "Garden Apartment",
              "icon": "pi pi-file",
            }]
        },
            {
              "label": "Homes",
              "data": "Homes",
              "expandedIcon": "pi pi-folder-open",
              "collapsedIcon": "pi pi-folder",
              "children": [{
                "label": "Home",
                "data": "Home",
                "icon": "pi pi-file",
              },
                {
                  "label": "Duplex",
                  "data": "Duplex",
                  "icon": "pi pi-file",
                },
                {
                  "label": "Triplex",
                  "data": "Triplex",
                  "icon": "pi pi-file",
                }]
            }];

这是我认为的组件代码：

<p-treeSelect [(ngModel)]="selectedAptType" [options]="apartmentsTypesObj" display="chip"
                    [showClear]="true"
                    [metaKeySelection]="false"
                    selectionMode="checkbox" placeholder="Apt Type"></p-treeSelect>

这是它的样子，我认为当我 select 很多项目时显示我 select 编辑了多少项目会更好看，不想看到裁剪列表。

有什么想法可以实现吗？

Answer 1

您可以使用 pTemplate 指令为 primeng 提供自定义模板

试试这个：

<p-treeSelect [(ngModel)]="selectedAptType" [options]="apartmentsTypesObj" display="chip"
                    [showClear]="true"
                    [metaKeySelection]="false"
                    selectionMode="checkbox" placeholder="Apt Type">
    <ng-template pTemplate="value" let-node>
        {{selectedAptType.length ?  selectedAptType.length + ' selected' : 'Select'}}
    </ng-template> 
</p-treeSelect>

Simple Working Example

当超过 p-treeSelect 的宽度时显示计数而不是标签

show count instead of labels when exceeding the wide of a p-treeSelect

primeng

angular