Angular 下拉多选并带有checkbox的样式

1：导入相关的包 

import { MultiSelectModule } from 'primeng/multiselect';

2：html code

<div class="grid">
    <div class="card flex justify-content-center">
        <p-multiSelect [options]="groupedCities" [group]="true" [(ngModel)]="selectedCities" placeholder="Select Cities" 
　　　　　　　　scrollHeight="250px" display="chip">
            <ng-template let-group pTemplate="group">
                <div class="flex align-items-center">
                    <img src="https://primefaces.org/cdn/primeng/images/demo/flag/flag_placeholder.png" 
　　　　　　　　　　[class]="'mr-2 flag flag-' + group.value" style="width: 20px" />
                    <span>{{ group.label }}</span>
                </div>
            </ng-template>
        </p-multiSelect>
    </div>
</div>

3：ts code

import { Component, OnInit } from '@angular/core';
import { SelectItemGroup } from 'primeng/api';

@Component({
  selector: 'app-pallet',
  templateUrl: './pallet.component.html',
  styleUrls: ['./pallet.component.scss']
})


export class PalletComponent implements OnInit {

  groupedCities!: SelectItemGroup[];
  selectedCities!: City[];
  constructor() {
    this.groupedCities = [
      {
        label: 'Germany',
        value: 'de',
        items: [
          { label: 'Berlin', value: 'Berlin' },
          { label: 'Frankfurt', value: 'Frankfurt' },
          { label: 'Hamburg', value: 'Hamburg' },
          { label: 'Munich', value: 'Munich' }
        ]
      },
      {
        label: 'USA',
        value: 'us',
        items: [
          { label: 'Chicago', value: 'Chicago' },
          { label: 'Los Angeles', value: 'Los Angeles' },
          { label: 'New York', value: 'New York' },
          { label: 'San Francisco', value: 'San Francisco' }
        ]
      },
      {
        label: 'Japan',
        value: 'jp',
        items: [
          { label: 'Kyoto', value: 'Kyoto' },
          { label: 'Osaka', value: 'Osaka' },
          { label: 'Tokyo', value: 'Tokyo' },
          { label: 'Yokohama', value: 'Yokohama' }
        ]
      }
    ];
  }

  ngOnInit(): void { }

}


interface City {
  name: string,
  code: string
}
interface DoModelData {
  key: string,
  label: string,
  data: string,
  icon: string,
  children: DoModelData[]
}

4：使用效果