CODEWITHSUNDEEP
angularkendo-ui
Aakash Thakur
Aakash Thakur

Reputation: 3905

"[object object]" in dropdown values

I am trying to use kendo dropdown in my angular application. In the sample that they have given in their site they are binding an Array<string> to the dropdown as you can see in this plunker:http://plnkr.co/edit/FZWzZ8yPxsRJLjXnjKc1?p=preview

Now what I want to bind is slightly different. Its an array of objects. This is what I am trying to bind:

  public listItems: any = [
    {"a":"Item 1"}, 
    {"b":"Item 2"}, 
    {"c":"Item 3"}, 
    {"d":"Item 4"}];
}

But I am getting an [Object Object] in the dropdown:http://plnkr.co/edit/pMxbHkI3UuUHjMH6jp25?p=preview

Upvotes: 0

Views: 1640

Answers (1)

Suneet Bansal
Suneet Bansal

Reputation: 2702

Possible solution is attached below

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
 <kendo-combobox
        [data]="listItems"
        [textField]="'text'"
        [valueField]="'value'"
        [value]="selectedValue"
        [valuePrimitive]="true"
    >
        <ng-template kendoComboBoxItemTemplate let-dataItem>
            <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
        </ng-template>
    </kendo-combobox>
`
})

export class AppComponent {
  public listItems: any = [
    {"key":"a", "value":"Item 1"}, 
    {"key":"b", "value":"Item 2"}, 
    {"key":"c", "value":"Item 3"}, 
    {"key":"d", "value":"Item 4"}];
}

Upvotes: 1

Related Questions