Primeng Angular2中的多选复选框自定义下拉菜单答案

【问题标题】：Multiple select checkbox custom dropdown in primeng Angular2Primeng Angular2中的多选复选框自定义下拉菜单
【发布时间】：2023-03-29 18:59:01
【问题描述】：

我的问题与question 非常相似，但在 angular2 中。

我需要实现类似https://cdn.pbrd.co/images/8R7WhRUrq.png 的目标。带有自定义 html 的下拉菜单。像在下拉列表中附加网格之类的东西。是否可以通过primeng中的自定义html和group by来实现具有多个选择复选框下拉列表的下拉列表@

【问题讨论】：

请阅读您使用的所有标签的文本并更正您的标签，它与PrimeFaces 无关
你解决了吗？

标签： angular drop-down-menu primeng

【解决方案1】：

根据Primeng Docs。

自定义内容

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

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}"> <ng-template let-item pTemplate="selectedItem"> <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" /> <span style="vertical-align:middle">{{item.label}}</span> </ng-template> <ng-template let-car pTemplate="item"> <div class="ui-helper-clearfix" style="position: relative;height:25px;"> <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/> <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div> </div> </ng-template> </p-dropdown>

`import {SelectItem} from 'primeng/api';

导出类 MyModel {

cars: SelectItem[];

selectedCar: string;

constructor() {
    this.cars = [
        {label: 'Audi', value: 'Audi'},
        {label: 'BMW', value: 'BMW'},
        {label: 'Fiat', value: 'Fiat'},
        {label: 'Ford', value: 'Ford'},
        {label: 'Honda', value: 'Honda'},
        {label: 'Jaguar', value: 'Jaguar'},
        {label: 'Mercedes', value: 'Mercedes'},
        {label: 'Renault', value: 'Renault'},
        {label: 'VW', value: 'VW'},
        {label: 'Volvo', value: 'Volvo'},
    ];
}

【讨论】：