PrimeNG p-listbox背景色

Question

我正在尝试第一次使用PrimeNG的p-listbox组件。一个简单的p-listbox似乎可以正常工作，但是当我添加ng-template时，事情就无法正常进行。因此，我的示例p-listbox控件在列表字段中同时显示了字符串和ID。

字符串（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个项目都是相同的颜色，并且如果取消选择列表框，则一个项目将无法分辨选择了哪个项目。

我正在使用9.0.1 PrimeNG版本。

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，选中?documentation