下拉值中的“[object object]”

时间:2017-05-08 15:56:22

标签: angular kendo-ui

我正在尝试在我的角度应用程序中使用kendo下拉列表。在他们在网站上提供的示例中,他们将Array<string>绑定到下拉菜单,如您在此搜索中所见:http://plnkr.co/edit/FZWzZ8yPxsRJLjXnjKc1?p=preview

现在我要绑定的内容略有不同。它是一个对象数组。这就是我想要绑定的内容:

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

但我在下拉列表中收到了[Object Object]http://plnkr.co/edit/pMxbHkI3UuUHjMH6jp25?p=preview

1 个答案:

答案 0 :(得分:1)

可能的解决方案见

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