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>

typescript组件代码如下：

    //
    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