ng-select中如何控制选中元素的显示

Question

我无法限制 ng-select 中所选选项的显示

有没有办法可以控制 ng-select 中所选项目的显示？目前，由于有大量选项和“全选”功能，选择所有选项会淹没 UI。限制显示的选定选项会很有帮助，后跟省略号 (...) 和工具提示或类似内容。谢谢你！ ♥

             <ng-select [items]="advertisersDv" class="custom" id="AdDv"
                        bindLabel="advertiserName"
                        [compareWith]="compareFn"
                        [multiple]="true"
                        [virtualScroll]="true"
                        [closeOnSelect]="false"
                        groupBy="partnerName"
                        [readonly]="!hasPermission([{moduleAccess:ModuleAccess.ADVERTISER_MANAGEMENT,accessLevel:AccessLevel.UPDATE}])"
                        (clear)="clearAll('dvAdvertisers')"
                        (change)="isCheckedAllDv();selectionchange($event,'dvAdvertisers')"
                        (open)="isCheckedAllDv()"
             formControlName="dvAdvertisers">
               <ng-template ng-header-tmp>
                 <label>
                   <input type="checkbox" class="form-check-input" [checked]="isCheckedAllDvAdvertisers"
                          (change)="toggleSelectAllDv($event)">
                   <span class="fw-bold ps-2 fs-6">All
                </span>
                 </label>
               </ng-template>
             </ng-select>

Answer 1

ng-select

库允许您为所选项目创建自定义模板：

<ng-template ng-multi-label-tmp let-items="items" let-clear="clear">

然后你可以只选择 4 个元素来用

slice

管道显示。

<div class="ng-value" *ngFor="let item of items | slice : 0 : 4">

您可以在省略号上绑定一个 matTooltip 以显示您的所有项目：

<div class="ng-value" *ngIf="items.length > 4">
          <span class="ng-value-label" [matTooltip]="getAllCitiesLabel()"
            >{{ items.length - 4 }} more...</span>

完整代码示例和 Stackblitz 复制 :

<ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
    <div class="ng-value" *ngFor="let item of items | slice : 0 : 4">
      <span class="ng-value-label">{{ item.name }}</span>
      <span class="ng-value-icon right" (click)="clear(item)" aria-hidden="true"
        >×</span>
    </div>
    <div class="ng-value" *ngIf="items.length > 4">
      <span class="ng-value-label" [matTooltip]="getAllCitiesLabel()"
        >{{ items.length - 4 }} more...</span
      >
    </div>
  </ng-template>


export class AppComponent {
  cities = [
    { id: 1, name: 'Vilnius' },
    { id: 2, name: 'Kaunas' },
    { id: 3, name: 'Pavilnys', disabled: true },
    { id: 4, name: 'Pabradė' },
    { id: 5, name: 'Klaipėda' },
    { id: 6, name: 'Test' },
    { id: 7, name: 'Another' },
    { id: 8, name: 'AndAnother' },
  ];
  selectedCityIds: string[];

  constructor() {}
  getAllCitiesLabel() {
    return this.selectedCityIds.join(',');
  }
}