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

Question

请看一下这个问题。

假设：

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

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

我想使用我自己的字典作为 primeng 组件"options"

代码:

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

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

我知道如何用模板替换 "label"，但是用 dataKey 替换 "value" 属性不起作用：

<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 数组。只需输入您的数组并指定您希望将哪些字段用作值和标签。

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 列表中的自定义数据输入

Angular 2 - custom data input in primeng list

angular

primeng