Цвет фона прайм-листа PrimeNG

Question

Я пытаюсь использовать компонент p-listbox в PrimeNG впервые. Кажется, работает простой p-listbox, но когда я добавил ng-template, все работает неправильно. Итак, мой пример элемента управления p-listbox отображает строку и идентификатор в полях списка.

string (id)

<p-listbox #nav id='nav' name='nav' [options]='incidents'
    (onClick)='onNavChange( $event )' multiple='false'
    [listStyle]="{'max-height':'400px'">
    <p-header>Selected Id: {{ model ? model.IncidentId : 'none'}}</p-header>
    <ng-template let-incident pTemplate='item'>
        <div class='ui-helper-clearfix'>
            <span>{{incident.IPAddress}} ({{incident.IncidentId}})</span>
        </div>
    </ng-template>
</p-listbox>

Код компонента машинописного текста выглядит следующим образом:

    //
    model: Incident;
    selectedModel: Incident;
    incidents: Incident[] = [
        new Incident( 1, '23.48.167.129', 'arin.net'),
        new Incident( 2, '180.97.158.175', 'ripe.net'),
        new Incident( 3, '103.46.138.150', 'arin.net'),
        new Incident( 4, '145.239.212.60', 'ripe.net')
    ];
    // 
    onNavChange( event ): void {
        // Allow direct call
        const item = <Incident>event.option;
        console.log( `${this.codeName}.onNavChange, Selected item: ${item.IncidentId}` );
        this.model = item;
        //
    }

Класс инцидента, который я только что поместил в нижний компонент:

class Incident {
    constructor(
        public IncidentId: number,
        public IPAddress: string,
        public NIC: string
    ) { }
}

Проблема в том, что после выбора элемента все элементы имеют выбранный цвет элемента. Таким образом, все 4 элемента имеют одинаковый цвет, и если один из них не выбран, невозможно определить, какой элемент был выбран.

Я использую PrimeNG версии 9.0.1.

Пример изображения Компонент p-listbox.

Answer 1

primeng p-listbox обязывает данные опций с базой структур {label:any,value:any}[] и устанавливает базу классов выбранного значения опции, если два параметра имеют одно и то же значение, обе темы будут иметь класс подсветки, ваши опции не имеют значение, поэтому уникальный не определен или все ключи имеют одно и то же значение.

, поэтому в лучшем случае просто сопоставьте данные опций с {label:any,value:any}[]

ngOnInit(){
        this.options = this.incidents
            .map(item => ({label:item.IPAddress , value:item.IncidentId}))
}

demo ?

другие опции - набор optionLabel и dataKey, см. документацию ?