devextreme datagrid angular - 在查找列 <dxi-column> 中插入一个图标答案

【问题标题】：devextreme datagrid angular - insert an icon in a lookup column <dxi-column>devextreme datagrid angular - 在查找列 <dxi-column> 中插入一个图标
【发布时间】：2018-01-19 17:17:55
【问题描述】：

>>已编辑

如何在<dxo-lookup> 列中插入图标？

这是我的代码，但我不知道如何插入图标

HTML

<dx-data-grid ......
   .....
   <dxi-column dataField="tipo" cellTemplate="cellTemplate">

      <dxo-lookup
           [dataSource]="typeColumsDataSource"
           valueExpr="id"
           displayExpr="descr">
      </dxo-lookup>
   </dxi-column>

   <div *dxTemplate="let data of 'cellTemplate'">
    <span class="dx-icon-home icon"></span> {{data.value}} {{data.text}}
  </div>

打字稿

this.typeColumsDataSource = {
          store: {
              type: 'array',
              data: [
                  { id: 0, descr: 'None' },
                  { id: 1, descr: 'Gift' },
                  { id: 2, descr: 'Request' },
                  { id: 3, descr: 'Gift/Request' },
              ],
              key: "id"
          }
      };

>>已编辑

现在我在模板中放了一个固定的图标，我需要根据data.value更改图标，我该怎么办？

我可以在模板中插入 "if" 吗？我可以在组件中调用方法吗？

【问题讨论】：

我已经修改了上面的代码添加了一个单元格模板，但是我需要更改图标

标签： devextreme dx-data-grid devextreme-angular

【解决方案1】：

您可以在this guide 之后自定义列的外观和风格

基本上这是所需代码的一个想法：

onCellPrepared: function(e) {
            if(e.rowType === "data" && e.column.command === "edit") {
                var isEditing = e.row.isEditing,
                    $links = e.cellElement.find(".dx-link");

                $links.text("");

                if(isEditing){
                    $links.filter(".dx-link-save").addClass("dx-icon-save");
                    $links.filter(".dx-link-cancel").addClass("dx-icon-revert");
                } else {
                    $links.filter(".dx-link-edit").addClass("dx-icon-edit");
                    $links.filter(".dx-link-delete").addClass("dx-icon-trash");
                }
            }
        }

【讨论】：