如何在 PrimeNg 的多选组件中添加额外标签？

如何解决如何在 PrimeNg 的多选组件中添加额外标签？

我有一个多选 primeNg 组件，它在服务器请求后动态归档：

<p-multiSelect
    [options]="multiselectDisplayOptions"
    [(ngModel)]="selectedValues"
    [optionLabel]="columnToDisplay.reference"
    [selectionLimit]="selectedLimitOne"
    display="chip"
    [showHeader]=false
    (onChange)="onChange($event.value)"
    (onClick)="onClick()"
    appendTo="body"
    [required]="isRequired">
</p-multiSelect>

在主要组件中，我有这些@Input() 的数据绑定，我想从这里选择“所有站点”：enter image description here

最后一个选项应该是“所有站点”，而不是从多选组件中选择所有站点。 “所有站点”选项不会成为数据库中的记录。

解决方法

这是我的例子，使用它并为自己调整样式和逻辑：

寻找什么：

1. 将您的多选命名为 #multiselect
2. 设置 [filter]="false" [showToggleAll]="false" 以删除基本输入和复选框
3. 在多选内容中使用<ng-template>自定义
4. 在 <ng-template pTemplate="header"> 中为自定义复选框 <p-checkbox (onChange)="multiselect.allChecked ? multiselect.uncheckAll() : multiselect.checkAll()"></p-checkbox> 添加逻辑

HTML：

<p-multiSelect #multiselect [filter]="false" [showToggleAll]="false" [options]="countries" [(ngModel)]="selectedCountries" defaultLabel="Select a Country" optionLabel="name" class="multiselect-custom">
    <ng-template pTemplate="header">
      <p-checkbox (onChange)="multiselect.allChecked ? multiselect.uncheckAll() : multiselect.checkAll()"></p-checkbox>
      All countries
    </ng-template>
    <ng-template let-value pTemplate="selectedItems">
      <div class="country-item country-item-value" *ngFor="let option of selectedCountries">
        <div>{{option.name}}</div>
      </div>
      <div *ngIf="!selectedCountries || selectedCountries.length === 0" class="country-placeholder">
        Select Countries
      </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
      <div class="country-item">
        <div>{{country.name}}</div>
      </div>
    </ng-template>
  </p-multiSelect>

TS：

countries: Country[];

  selectedCountries: Country[] = [];

  constructor() {
    this.countries = [
      {name: 'Australia',code: 'AU'},{name: 'Brazil',code: 'BR'},{name: 'China',code: 'CN'},{name: 'Egypt',code: 'EG'},{name: 'France',code: 'FR'},{name: 'Germany',code: 'DE'},{name: 'India',code: 'IN'},{name: 'Japan',code: 'JP'},{name: 'Spain',code: 'ES'},{name: 'United States',code: 'US'}
    ];
  }