Angular DevExtreme弹窗编辑模式渲染[object][object]问题求助

问题原因 #

你只给列配置了单元格显示模板（cellTemplate），但Popup编辑模式下，DevExtreme会默认用对应数据类型的编辑器渲染单元格内容。categories是数组对象类型，默认编辑器没法解析，所以直接输出了对象的字符串形式[object][object]。

解决方案 #

给categories列添加编辑单元格模板（editCellTemplate），或者用适配数组类型的编辑器（比如dx-tag-box）来处理编辑场景，下面给你几种可行的方案：

方案1：复用现有模板当编辑模板 #

直接把视图模式的模板复用给编辑模式，让弹窗里的单元格和视图显示一致：

<dxi-column 
  dataField="categories" 
  cellTemplate="categoryCellTemplate" 
  editCellTemplate="categoryCellTemplate"
  [width]="150">
</dxi-column>

<!-- 原有的模板不用改 -->
<div *dxTemplate="let cct of 'categoryCellTemplate'" class="source-cell">
    <span *ngFor="let category of cct.data.categories">
        <span [ngClass]="category.name.toLowerCase() ?? 'no-category'" class="source-item">{{category?.name}}</span>
    </span>
</div>

方案2：用dx-tag-box做可编辑的编辑器 #

如果需要在弹窗里能选择编辑分类，推荐用TagBox组件，更符合编辑交互逻辑：

<dxi-column 
  dataField="categories" 
  cellTemplate="categoryCellTemplate" 
  [width]="150">
  <!-- 配置编辑单元格的模板 -->
  <dxo-edit-cell-template>
    <dx-tag-box
      [dataSource]="allCategories" <!-- 这里要传入所有可选分类的数据源 -->
      displayExpr="name"
      valueExpr="name"
      [(value)]="categories">
    </dx-tag-box>
  </dxo-edit-cell-template>
</dxi-column>

<!-- 原有的视图模板保持不变 -->
<div *dxTemplate="let cct of 'categoryCellTemplate'" class="source-cell">
    <span *ngFor="let category of cct.data.categories">
        <span [ngClass]="category.name.toLowerCase() ?? 'no-category'" class="source-item">{{category?.name}}</span>
    </span>
</div>

方案3：设置该列不可编辑 #

如果不需要在弹窗里编辑这个字段，直接给列加[allowEditing]="false"，弹窗里该字段会直接显示视图模板内容且不可修改：

<dxi-column 
  dataField="categories" 
  cellTemplate="categoryCellTemplate" 
  [allowEditing]="false"
  [width]="150">
</dxi-column>

内容的提问来源于stack exchange，提问作者Mandar Pande