angular - Kendo DropDownList，嵌套对象为TextField(Kendo DropDownList with Nested Object as TextField)

Question

I have a kendo-dropdownlist and want to assign the textField property to an attribute that lies within a nested object.

(我有一个kendo-dropdownlist，想将textField属性分配给位于嵌套对象内的属性。)

User Object:

(用户对象：)

{ 
  id: 123456  <--valueField
  contact: {
      name: Jane Doe <--textField
      email: 
      ...
  }
}

The issue is Kendo does not display the name in the selected box nor the dropdown because it cannot seem to find the contact.name attribute or any other attribute within the contact object.

(问题是Kendo不会在选定的框或下拉列表中显示名称，因为它似乎无法在contact对象中找到contact.name属性或任何其他属性。)

Here is how I have it configured and would assume for it to be since the grid's kendo-grid-column field property can use nested object attribute names:

(这是我的配置方式，并假设它是因为网格的kendo-grid-column field属性可以使用嵌套对象属性名称：)

<kendo-dropdownlist id="profileOwner"
                    [data]="userData"
                    [textField]="'contact.name'"
                    [valueField]="'id'"
                    [(ngModel)]="profileOwner"
                    [valuePrimitive]="true"></kendo-dropdownlist>

I know Kendo can find the object because when I set the the text field to [textField]="'contact'" it results with showing the following: Object,Object

(我知道Kendo可以找到该对象，因为当我将文本字段设置为[textField]="'contact'"它会显示以下内容： Object，Object)

I have tried the various configurations:

(我尝试了各种配置：)

<kendo-dropdownlist id="profileOwner"
                    [data]="userData"
                    [textField]="contact.name"  <-- Cannot find object error 
                    [valueField]="'id'"
                    [(ngModel)]="profileOwner"
                    [valuePrimitive]="true"></kendo-dropdownlist>
---
<kendo-dropdownlist id="profileOwner"
                    [data]="userData"
                    textField="contact.name"  <-- I still get Nothing
                    valueField="id"
                    [(ngModel)]="profileOwner"
                    [valuePrimitive]="true"></kendo-dropdownlist>

My intended workaround before making this post was to use the item template to show the values.

(在发布本文之前，我打算采取的变通方法是使用项目模板显示值。)

This successfully shows the values in the dropdown window but not in the selected box:

(这会在下拉窗口中成功显示值，但不会在所选框中显示这些值：)

<kendo-dropdownlist id="profileOwner"
                    [data]="userData"
                    [textField]="'contact.name'"
                    [valueField]="'id'"
                    [(ngModel)]="profileOwner"
                    [valuePrimitive]="true">
         <ng-template kendoDropDownListItemTemplate let-dataItem>
                <span class="template">{{ dataItem.contact.name }}</span>
         </ng-template>
</kendo-dropdownlist>

Workaround attempt

(解决方法尝试)

Version Info:

(版本信息：)

Angular: 7.2.9
@progress/kendo-angular-dropdowns: ^3.5.0

  ask by Jean Claude Roy translate from so

Answer 1

Simple.

(简单。)

Just change your code as below:

(只需如下更改代码：)

<kendo-dropdownlist id="profileOwner"
                    [data]="userData"
                    [textField]="contact.name"
                    [valueField]="id"
                    [(ngModel)]="profileOwner"
                    [valuePrimitive]="true"></kendo-dropdownlist>

this because why you sould bind for example the id line [valueField]="id" not an string [valueField]="'id'" .

(这是因为为什么要绑定例如id行[valueField]="id"而不是字符串[valueField]="'id'" 。)