时间戳

首页 > 解决方案 > ag-grid Angular - 如何通过标记/HTML 自定义列

javascript - ag-grid Angular - 如何通过标记/HTML 自定义列

问题描述

我是新手，ag-grid并计划为我们的 Angular 项目实施它。它看起来很棒，除了它支持单元格模板。与此不同PrimeNG，或者Devextreme我没有看到该列的“模板”功能。

ag-grid 的大部分文档都解释了如何通过 component.ts 类中的“cellrenderer”自定义单元格。我想通过 html 而不是 .ts 自定义单元格

下面的代码是PrimeNG通过模板自定义单元格的一部分。有人可以帮助我ag-grid通过 html实现相同的功能吗

<ng-template pTemplate="body" let-product>
        <tr>
            <td>{{product.name}}</td>
            <td><img [src]="'assets/showcase/images/demo/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td>
            <td>{{product.price | currency:'USD'}}</td>
            <td>{{product.category}}</td>
            <td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
            <td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
        </tr>
    </ng-template>

感谢您对此的帮助。

标签： javascriptangularag-gridag-grid-angularangular10

解决方案

您可以返回一个角度组件，而不仅仅是纯文本。您可以使用cellRendererFramework可以从列定义访问的内容来执行此操作。

{
          headerName: "CLIENT",
          field: "client",
          cellRendererFramework: (params) => {
            return <AgGridCellRenderer>
              
            </AgGridCellRenderer>
          },
        },

该params参数具有所有 agRid 内容，例如“api andcolumApi”以及原始单元格值以及整个行数据。

推荐阅读