Question

请看一下这个问题。

假设：

primeng p-listbox的默认输入是如下字典：

let dict = [{
   label: 'some label',
   value: 'some value'
}]

我想用自己的字典作为＆＃34;选项＆＃34; primeng组件

代码：

我想使用dataKey属性和模板将我的自定义词典作为项目提供：

let dict = [{
   id: 1,
   name: 'name'
}]

我知道如何更换＆＃34;标签＆＃34;使用模板但替换＆＃34;值＆＃34;使用dataKey属性不起作用：

<p-listbox dataKey="id" [style]="{'width':'100%'}" [options]="dict" multiple="multiple" [(ngModel)]="selected" checkbox="checkbox" filter="filter">
  <template let-item pTemplate="item">
       {{item.name}}
  </template>
</p-listbox>

此致

Answer 1

几个星期前我遇到了同样的问题并创建了下面的管道，将任意长度的数组转换为PrimeNg SelectItem数组。只需在数组中输入管道，并指定您希望将哪些字段用作值＆amp;标签

import { Pipe, PipeTransform } from '@angular/core';
import { SelectItem } from 'primeng/primeng';

/*
 * Converts array of objects to a format compatible with PrimeNG's Dropdown component
 * Usage:
 *  array | formatSelectItem:'Description':'Key'"
 * Example:
 *  dict[{id: 1, name: 'name'}] | formatSelectItem:'id':'name'
 *  formats to: [{ value: '1' , label: 'name'}]
*/

@Pipe({
  name: 'formatSelectItem'
})
export class FormatSelectItemPipe implements PipeTransform {
  transform(value: any[], valueProperty: string, labelProperty: string): SelectItem[] {
    if (value) {
     return value.map(function (item) {
        return {
          value: item[valueProperty],
          label: item[labelProperty]
        };
      });
    }
  }
}

您可以将其用作以下内容：

<p-listbox dataKey="id" [style]="{'width':'100%'}" [options]="dict | formatSelectItem:'id':'name'" multiple="multiple" [(ngModel)]="selected" checkbox="checkbox" filter="filter">
  <template let-item pTemplate="item">
       {{item.name}}
  </template>
</p-listbox>

Angular 2 - 在primeng列表中输入自定义数据

1 个答案: