Я пытаюсь использовать компонент 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.