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

Question

我有一个 multiselect 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

最后一个选项应该是“所有站点”，而不是 select 来自 multi-select 组件的所有站点。 “所有站点”选项不会成为数据库中的记录。

Answer 1

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

寻找什么：

将您的多选命名为 #multiselect
设置[filter]="false" [showToggleAll]="false"删除基本输入和复选框
在多选内容中使用<ng-template>自定义
在 <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'}
    ];
  }

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

How to add an extra label in a multiselect component in PrimeNg?

label

multi-select

option

typescript

angular