角2 - プライムリストのカスタムデータ入力

Question

この問題を見てください。

仮定：

primeng P-リストボックスのデフォルトの入力は以下のような辞書です：

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

私はprimengコンポーネントの "オプション"

として自分の辞書を使用したいです

コード：

私はprovしたいと思いますIDE dataKeyプロパティとテンプレートを使用してアイテムとしての私のカスタム辞書：

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

は、私は、テンプレートと、「ラベル」を交換することなく、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配列に変換しました。あなたの配列のパイプを渡して、値&ラベルとして使用するフィールドを指定します。

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>