html - DevExtreme DropDownBox 显示表达式在 UI (Angular) 上呈现 [object Object]

Question

我有一个<dx-drop-down-box>HTML 元素，我想用它来获取客户列表并使用特定表达式在字段中显示它们。该列表从 SQL 数据库馈送到视图模型中。以下是相关的片段：

组件.html

<dx-form id="customerform" [(formData)]="customer" cssClass="form-group" [colCount]="2">
    <dxi-item itemType="group" caption="Customer" cssClass="first-group">
                <dx-drop-down-box
                        [(value)]="gridBoxValue"
                        [(opened)]="isGridBoxOpened"
                        valueExpr="customerId"
                        
                        [deferRendering]="false"
                        [displayExpr]="gridBox_displayExpr"
                        placeholder="Choose a customer..."
                        [showClearButton]="true"
                        [dataSource]="gridDataSource"
                        (onOptionChanged)="onGridBoxOptionChanged($event)"
                        (onOpened)="onCustomerDropDownOpen($event)"
                        [dropDownOptions]="{ width: 'auto' }"   
                        
                >
                    <div *dxTemplate="let data of 'content'">
                        <dx-data-grid
                                [dataSource]="gridDataSource"
                                [hoverStateEnabled]="true"
                                [(selectedRowKeys)]="gridBoxValue"
                                [columnAutoWidth]="true"
                        >
                            <dxo-selection mode="single"></dxo-selection>
                            <dxo-filter-row [visible]="true"></dxo-filter-row>
                            <dxo-scrolling mode="virtual"></dxo-scrolling>
                            <dxo-paging [enabled]="true" [pageSize]="10"></dxo-paging>
                            <dxo-editing mode="cell" [allowUpdating]="false" [allowAdding]="false" [allowDeleting]="false"></dxo-editing>
                 
                            <dxi-column dataField="firstName" caption="Όνομα" ></dxi-column> 
                            <dxi-column dataField="lastName" caption="Επίθετο"></dxi-column> 
                            <dxi-column dataField="phone" caption="Τηλέφωνο"></dxi-column> 
                            <dxi-column dataField="code" caption="Κωδικός"></dxi-column> 
                            <dxi-column dataField="customerId" [visible]="false"></dxi-column>
                        </dx-data-grid>
                    </div>
                </dx-drop-down-box>
    </dxi-item>  
</dx-form>    

显示表达式

gridBox_displayExpr(item) {
  console.log("Logging item..." + item);
   return item && item.lastName + ' ' + item.firstName + ' <' + item.phone + '>';       
}

在浏览器中进行了一些调试后，我发现只要检测到更改，就会出现itemin 参数。客户数据已从后端正确加载，我可以将其分配给 DTO 对象，我可以在调试器中看到该对象。只是 UI 不同意我正在做的事情。gridBox_displayExpr()undefined

我用来验证数据是否正确推送的另一个标记是一个OnGridBoxOptionChanged函数，它会在我单击新名称时立即触发。来自 HTML 代码的事件正确显示了之前的值和我选择的新名称，但该字段仍然[object Object]不是有效名称。顺便说一句，gridDataSource实现一个带有customerId数字字段的视图模型。

你知道可能出了什么问题吗？

标签： htmlangulartypescriptdevextreme-angular