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

Question

我尝试使用多选的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