有沒有辦法在 PrimeNG P-dropdown 值集中添加分隔符或分隔符

Question

我正在使用 Angular P-dropdown 功能，數據將從 db 填充，我需要在每組鍵后添加分隔符。

IE/

1. 在性別鍵最后一個值之后添加分隔符
2. 在組鍵最后一個值之后添加分隔符

<p-dropdown placeholder="Select" [options]="optionsArray" [(ngModel)]="selectOption"
            (ngModelChange)="triggerOption($event)" dropdownIcon="icons-down">
</p-dropdown>

//dynamic value from db
var ab =  [
   { label: "group 3", value: { key: 'group', value: '3' } },
   { label: "Female", value: { key: 'gender', value: 'F' } },
   { label: "New", value: { key: 'action', value: "New Action" } },
   { label: "group 1", value: { key: 'group', value: '1' } },
   { label: "group 2", value: { key: 'group', value: '2' } },
   { label: "Male", value: { key: 'gender', value: "Male" } },
   { label: "Old", value: { key: 'action', value: "Old" } },
   { label: "Not required", value: { key: 'action', value: "ACnotReq" } },
   
];

var newGenderArray = ab.filter(type  => {
 return type.value.key == 'gender';
});
 var newGroupArray =ab.filter(type => {
   return type.value.key == 'group';
 })
 ...,// logic
 var  optionsArray = newGenderArray.concat(newGroupArray);
console.log("optionsArray:", optionsArray);

以 static 的方式嘗試了以下 CSS，需要這是動態的，因為值來自數據庫，計數正在改變。

.ui-dropdown-items li:nth-child(3), .ui-dropdown-items li:nth-child(8) {
    border-bottom: 1px solid #dbdbdb;
   ...
}

預期結果：

Answer 1

嘗試了像這樣的高級過濾：

<h5>Content with Filters</h5>
<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
    <ng-template pTemplate="selectedItem">
        <div class="country-item country-item-value"  *ngIf="selectedCountry">
            <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" />
            <div>{{selectedCountry.name}}</div>
        </div>
    </ng-template>
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
            <div>{{country.name}}</div>
        </div>
    </ng-template>
</p-dropdown>

基於https://primefaces.org/primeng/showcase/#/dropdown

在 ng-template 中，您可以修改其內容，包括添加一些條件和添加分隔符