ng2-select 中的数据绑定失败

【问题标题】：data binding failed in ng2-selectng2-select 中的数据绑定失败
【发布时间】：2017-04-21 13:16:25
【问题描述】：

我正在尝试使用 ng2-select 将对象数组绑定到下拉列表。当我尝试使用字符串数组时它工作正常

private category: Array<object> = [{ "value": 1, "text": "Table" }, { "value": 2, "text": "Chair" }, { "value": 3, "text": "Light"}]

和我的html如下：

 <ng-select [items]="category" [allowClear]="true"
                                       placeholder="No country selected">
                            </ng-select>

我还在我的 module.ts 中导入了 selectModule

【问题讨论】：

您能否更具体地解决您的问题。您是否收到控制台错误或选择下拉菜单为空？
选择下拉菜单为空

标签： angular typescript angular2-routing ng2-bootstrap

【解决方案1】：

您的数据格式不正确。

代替：

private category: Array<object> = [
    { "value": 1, "text": "Table" },
    { "value": 2, "text": "Chair" },
    { "value": 3, "text": "Light" }
]

用途：

private category: Array<object> = [
    { "id": 1, "text": "Table" },
    { "id": 2, "text": "Chair" },
    { "id": 3, "text": "Light" }
]

区别在于value 代表一个项目的键。这当然是由 ng-select 模块开发人员定义的。

【讨论】：

但是如果数据来自 web api 怎么办？是否必须转换 {id:" ",text:" " } 格式的数据
是的，您需要这样做。由于您无法定义对象中的键和值是什么，因此 ng-select 的开发人员不会公开它。但这在大多数下拉模块中并不少见。