角度 devextreme 的弹出或表单模式正在使用 [object][object]

Answer 1

您的

cellTemplate

与您的弹出窗口无关。我猜您正在使用

dx-data-grid

组件。为列创建单元格模板只会更改数据网格内该特定列的单元格的外观。

在弹出窗口中将有一个默认编辑器，尝试显示对象数组。 DevExtreme 尝试使用

dx-tag-box

或

dx-select-box

来渲染数组。该标签框不知道如何解释您的

categories

数组。

以下是如何解决此问题的示例：

1. 使用

   editCellTemplate

   更改弹出表单内编辑器的外观。

2. 使用

   calculateDisplayValue

   更改数据网格列单元格内的外观。而不是像您一样使用

   cellTemplate

   。

<dxi-column
    dataField="categories"
    editCellTemplate="categoryEditCellTemplate"
    [calculateDisplayValue]="calculateCategoriyDisplayValue">
</dxi-column>


<!-- this is for using a tag box inside the popup form to be able to select multiple categories based on their id -->
<div *dxTemplate="let cct of 'categoryEditCellTemplate'" class="source-cell">
    <dx-tag-box [dataSource]="categories" valueExpr="id" displayExpr="name" [(value)]="cct.data.categories"></dx-tag-box>
</div>

class MyComponent {

    constructor() {
        this.calculateCategoriyDisplayValue = this.calculateCategoriyDisplayValue.bind(this);
    }

    rows: { categories: number[] }[] = [
        { categories: [1,2] },
        { categories: [2,3] },
        { categories: [1] },
    ];

    categories: { id: number; name: string; }[] = [
        { id: 1, name: 'Category1' },
        { id: 2, name: 'Category2' },
        { id: 3, name: 'Category3' }
    ];

    // this is for showing category names inside the categories column cells
    calculateCategoriyDisplayValue(rowData: {categories: number[]}) {
        if (rowData.categories == null) return;
        return rowData.categories.map(id => this.categories.find(c => c.id == id)?.name).filter(x => x != null).join(', ');
    }
}

我建议更改您的数据模型，以便数组中只有类别 ID 而不是对象，就像我在示例中所做的那样。这会让事情变得更容易。