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，我只是放在最下面的组件：

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}[]，如果两个选项具有相同的值，则将设置所选选项值的 class 基数两个主题都将具有突出显示 class，您的选项没有值，因此唯一未定义或所有键都具有相同的值。

所以最好的情况就是将选项数据映射到 {label:any,value:any}[]

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

demo

另一个选项是设置optionLabel和dataKey，勾选documentation

PrimeNG p-listbox 背景颜色

PrimeNG p-listbox background color

listbox

typescript

primeng

angular