Question

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

我需要实现像https://cdn.pbrd.co/images/8R7WhRUrq.png这样的事情。下载自定义HTML。有些事情比如在下拉列表中附加网格。是否有可能通过自定义html＆amp;和多个选择复选框下拉菜单实现下拉菜单分组在primeng

Answer 1

根据Primeng文档。

自定义内容

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'},
    ];
}

}`

primeng Angular2中的多选复选框自定义下拉列表

1 个答案: