Question

我正在使用angular2-multiselect-dropdown，但下拉列表是空的。

以下是ts文件中的数据：

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

]

在HTML中：

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

在示例中，他正在使用{“id”：9，“itemName”：“Italy”}，效果很好。那么是否可以配置字段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
}

在将列表设置为数据输入之前，您必须转换列表。

您可以使用map来完成此操作。

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

Answer 3

将以下属性添加到angular2-multiselect HTML标签。 [settings] =“ dropdownSettings”

并如下配置labelKey dropdownSettings.labelKey ='value'而不是默认的itemName;

angular2-multiselect-dropdown显示空列表

3 个答案: