p-multi在下拉菜单中选择更改标签

Question

我尝试使用multiselect primeng为每个下拉标签添加一些自定义html文本。

就像在下面的图片中，我需要在读写标签选项之前添加一个小的矩形范围显示颜色。

想这下面的功能，但它更新的默认标签和selectedItemsLabel而不是下拉标签

this.multi.updateLabel = function() { 
    console.log(this); 
    var label = this.value.length.toString()+ "P"; 
    this.valuesAsString = label; 
} 

有人请这方面的帮助。我非常喜欢使用angular和primeng，任何技巧或参考链接都会有很大的帮助。

在此先感谢。

Answer 1

p-multiSelect选项标签是数据绑定的。你可以检查例子here。

如果要为标签添加更多文本，需要将它们添加到绑定到p-multiSelect选项的数组的对象的label属性中。

例子：

TS：

import { Component, OnInit, EventEmitter, Pipe, ChangeDetectorRef, Input } from "@angular/core"; 
import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; 

@Component({ 
    selector: 'input-overview-example', 
    templateUrl: 'input-overview-example.html', 
    styleUrls:['input-overview-example.css'] 
}) 
export class InputOverviewExample { 

    cars: SelectItem[]; 

    selectedCars: string[] = []; 

    constructor() { 
     this.cars = []; 
     this.cars.push({label: 'Custom Label 1 Audi', value: 'Audi'}); 
     this.cars.push({label: 'Custom Label 2 BMW', value: 'BMW'}); 
     this.cars.push({label: 'Custom Label 3 Fiat', value: 'Fiat'}); 
     this.cars.push({label: 'Custom Label 4 Ford', value: 'Ford'}); 
     this.cars.push({label: 'Honda', value: 'Honda'}); 
     this.cars.push({label: 'Jaguar', value: 'Jaguar'}); 
     this.cars.push({label: 'Mercedes', value: 'Mercedes'}); 
     this.cars.push({label: 'Renault', value: 'Renault'}); 
     this.cars.push({label: 'VW', value: 'VW'}); 
     this.cars.push({label: 'Volvo', value: 'Volvo'}); 
    } 
} 

HTML：

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars"></p-multiSelect> 

<p>Selected Cars: {{selectedCars}}</p> 

Plunker example