p-multiWählen Sie das Änderungskennzeichen im Dropdown-Menü

Question

Ich versuche, einen benutzerdefinierten HTML-Text für jedes Dropdown-Etikett mit Multiselect von primeng hinzuzufügen.

Wie zum Beispiel in der unteren Abbildung, muss ich eine kleine rechteckige Spannweite hinzufügen, die Farbe vor den Beschriftungsoptionen von Lesen und Schreiben anzeigt.

diese unten Funktion versucht, aber es aktualisiert die Standardbeschriftung und selectedItemsLabel statt die Drop-down-Etikett mit diesem

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

jemand bitte helfen. Ich bin sehr neu in der Verwendung von eckigen und primeng, jede Tricks oder Referenz Links wäre eine große Hilfe.

Vielen Dank im Voraus.

Answer 1

Die Label der p-multiSelect-Option sind datengebunden. Sie können Beispiele here überprüfen.

Wenn Sie den Beschriftungen mehr Text hinzufügen möchten, müssen sie in der label -Eigenschaft der Objekte für das an die p-multiSelect-Optionen gebundene Array hinzugefügt werden.

Beispiel:

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