每行 DevExtreme 自定义下拉菜单答案

【问题标题】：DevExtreme Custom dropdown per row每行 DevExtreme 自定义下拉菜单
【发布时间】：2020-10-29 20:14:34
【问题描述】：

我在 Angular 中有一个 devextreme 网格，每行有 1 列需要下拉，但下拉是特定于行的，因此该行的数据源包括下拉的数据源。不幸的是，它不允许我在下拉列表中使用[dataSource]="data.rowDataSourceInfo" 之类的东西（它只是不显示任何内容，也没有控制台错误）。有谁知道如何使它正常工作？我使用的是 Devextreve 20.1.7 版和 Angular 9.2.4 版。

【问题讨论】：

我确实找到了js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/…，它可能在正确的轨道上，但在他们的所有者列示例中，他们仍在使用 dxo-lookup，这并不是我想要的方式.也许我需要为此生成一个可能值的超集，然后有一个 dxo 下拉菜单，其中只有行的个人选择？

标签： angular devextreme

【解决方案1】：

我终于想出了如何让它发挥作用。

在模板中，您需要设置对列的查找和编辑单元格模板。请注意，查找中的数据源包含整个网格的所有产品名称，这更多地用于过滤列。编辑单元格模板中的数据源只有那些适用于网格的产品名称。

<dxi-column dataField="productId" dataType="string" caption="Product Name"  [allowEditing]="true"   editCellTemplate="changeProductNameEditor" >
   <dxo-lookup [dataSource]="allProductNames" valueExpr="productId" displayExpr="productName"></dxo-lookup>
</dxi-column>

<div *dxTemplate="let cellInfo of 'changeProductNameEditor'">
  <dx-select-box
    [items]="cellInfo.data.availableProductNames"
    [value]="cellInfo.value"
    displayExpr="productName"
    valueExpr="productId"
    (onValueChanged)="updateProductName($event, cellInfo)"
  >
</dx-select-box>
</div>

在组件中，您还必须添加一个方法来处理更改的值：

updateProductName(eventData, cellInfo: any) {
  if (cellInfo.setValue) {
    cellInfo.setValue(eventData.value);
  }
}

【讨论】：