Search code examples
angulartypescriptangular2-routingng2-bootstrap

data binding failed in ng2-select


I am trying to bind array of object to dropdown using ng2-select.It works fine when I tried using array of string

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

and my html as follow:

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

I have also Imported selectModule in my module.ts


Solution

  • Format of your data is not correct.

    Instead of:

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

    Use:

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

    The difference is in value which represents key of one item. This i ofcourse defined by ng-select module developer.