devextreme - devextreme datagrid angular - 在查找列中插入图标

Question

>>>>已编辑<<<<

如何在列中插入图标<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”吗？我可以在组件中调用方法吗？

Answer 1

您可以按照本指南自定义列的外观

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

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");
                }
            }
        }