无法将函数分配给带有angular2的dx选择框中的displayExpr

Question

“站点”的选择框应显示站点代码和描述的组合，以供用户选择。

下面是html：

<dx-select-box class="pull-right"
                           placeholder="Select Site"
                           [dataSource]="sites"
                           [displayExpr]=displaySite
                           [valueExpr]="SiteID"
                           [value]="selectedSite"
                           [searchEnabled]="true"></dx-select-box>

组件代码如下：

displaySite = (data) => {        
    return data.Code + "(" + data.Description + ")";
}

这里的问题是displaySite函数中的数据值始终为空。

当我在datagrid中使用lookup时，也是一样的，如下所示：

{ dataField: "SiteID", lookup: { dataSource: sites, valueExpr: "SiteID", displayExpr: displaySite } }

下面是我使用的dev-extreme版本：

"devextreme": "16.2.3",
"devextreme-angular": "16.2.3-rc.3",

Answer 1

1) [value]="selectedSite" -如果selectedSite没有默认值，则displaySite函数中的data将为null。因此，像data.Code + "(" + data.Description + ")";这样表达式应该包含对null的检查，并且可以更改为data ? data.Code + "(" + data.Description + ")" : null;

2)小心使用[valueExpr]="SiteID"，因为如果SiteID是一个字符串(我在您的示例中建议这样做)，则应计算该表达式。正确的做法是在[valueExpr]="'SiteID'"或valueExpr="SiteID"上更改它。

我还准备了一个example on plunker，它演示了这个场景