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函数中的数据值始终为null。

当我在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没有默认值，data函数中的displaySite将为空。因此，data.Code + "(" + data.Description + ")";这样的表达式应该包含对null的检查，并且可以更改为data ? data.Code + "(" + data.Description + ")" : null;

2）注意[valueExpr]="SiteID"，因为如果SiteID是一个字符串（我在你的例子中建议的话），Angular中的方括号表示应该评估该表达式。正确将在[valueExpr]="'SiteID'"或valueExpr="SiteID"上更改。

我还准备了example on plunker，演示了这种情况

无法在带有angular2的dx-select-box中为displayExpr指定功能

1 个答案: