angular2-multiselect-dropdownは空のリストを表示します

Question

私はangular2-multiselect-dropdownを使用していますが、ドロップダウンは空です。 HTMLで

this.list = [ 
{ 
    "docid":1, 
    "value": "Europe" 
}, 
{ 
    "docid":2, 
    "value": "ASIA" 
}, 
{ 
    "docid":3, 
    "value": "AFRICA" 
}, 
{ 
    "docid":4, 
    "value": "LATIN AMERICA" 
}, 
{ 
    "docid":5, 
    "value": "NORTH AMERICA" 
} 

] 

：続い

はTSファイル内のデータである{9、 "itemNameに"： "イタリア"、 "ID" を}例において

<angular2-multiselect [data]="List" [(ngModel)]="selectedItems" 
     (onSelect)="onItemSelect($event)" 
     (onDeSelect)="OnItemDeSelect($event)" 
     (onSelectAll)="onSelectAll($event)" 
     (onDeSelectAll)="onDeSelectAll($event)"> 
     </angular2-multiselect> 

、彼が使用していますうまくいく。だから、itemNameフィールドを設定する方法はありますか？

https://github.com/CuppaLabs/angular2-multiselect-dropdown https://cuppalabs.github.io/angular2-multiselect-dropdown/#/basic

Answer 1

たぶん、私はあなたのコード内のエラーを検出しました。

<angular2-multiselect [data]="list" [(ngModel)]="selectedItems" 
     (onSelect)="onItemSelect($event)" 
     (onDeSelect)="OnItemDeSelect($event)" 
     (onSelectAll)="onSelectAll($event)" 
     (onDeSelectAll)="onDeSelectAll($event)"> 
     </angular2-multiselect> 

代わりにあなたが[data]="list"を記述する必要が[data]="List"の。

次に、前述のコメントのようにmapメソッドを追加します。

Answer 2

コンポーネントでは、[data]プロパティに特定の形状が設定されることが予想されます。この場合、次のようになります。

export class ListItem{ 
    id: Number; 
    itemName: String 
} 

データの入力として設定する前にリストを変換する必要があります。

マップを使用してこれを行うことができます。

this.list = this.list.map((item) => { 
    return { 
    id: item.docId, 
    itemName: item.value 
    } 
})