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

Question

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

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

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

<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>

感谢您对此的帮助。

Answer 1

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

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

params参数包含所有 agRid 内容，例如 'api and columApi' 以及原始单元格值以及整个行数据。