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" 
} 

] 

: 예에서

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

, 그는 사용

다음은 TS 파일의 데이터입니다 { "ID": 9, "itemName에": "이탈리아"} 잘 작동합니다. 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 
    } 
})