Angular Ag-Grid：在 Ag 网格单元格中添加 PrimeNg P-dropdown 作为 html 元素

Question

如何在 Ag-Grid 单元格中包含基本 HTML 元素。

下面是我的 html PrimeNg p-dropdownMyComponent.html

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown>

现在 ag-grid 用于将上面的 p-dropdown 包含在其中一个单元格中

<ag-grid-angular #agGrid style="width: 100%; height: 350px;" class="ag-theme-alpine"
[gridOptions]="gridOptions"
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>

下面是代码MyComponent.ts

 this.columnDefs= [{
    headerName: 'Type',
    field: 'type',
    editable: true
   },
   {
    headerName: 'DropdownColumn'
    field: 'ddValue',
    cellEditor:'agRichSelectCellEditor',
    cellEditorParams: function(params) {
    
    },
    cellRenderer: function(params) {
     'What to do here'
    }
]

如何在任何 Ag-Grid 单元格中包含 Angular 的任何 HTML 元素（包括 ng-model + 单击功能）

Answer 1

如果您希望 AgGrid 单元格内有复杂的 HTML，那么就该使用单元格渲染器了。

\n

您需要定义一个自定义组件，该组件将实现ICellRendererAngularComp接口并通过该方法接收单元格的值agInit。

\n

prime-ng-dropdown.component.ts

\n

import { Component, OnInit } from "@angular/core";\nimport { ICellRendererAngularComp } from "ag-grid-angular";\nimport { ICellRendererParams } from "ag-grid-community";\n@Component({\n  selector: "app-prime-ng-dropdown",\n  templateUrl: "./prime-ng-dropdown.component.html",\n  styleUrls: ["./prime-ng-dropdown.component.css"]\n})\nexport class PrimeNgDropdownComponent implements ICellRendererAngularComp {\n  params: ICellRendererParams;\n\n  cars = [\n    { label: "Honda", value: "eHonda" },\n    { label: "Jaguar", value: "fJaguar" },\n    { label: "Mercedes", value: "gMercedes" }\n  ];\n\n  agInit(params: ICellRendererParams): void {\n    this.params = params;\n  }\n\n  onChange(value) {\n    this.params.data[this.params.colDef.field] = value;\n  }\n\n  refresh() {\n    return true;\n  }\n\n  doSomething() {}\n}\n

\n

prime-ng-dropdown.component.html

\n

<p-dropdown [options]="cars" [ngModel]="params.value" (ngModelChange)="onChange($event)"\n    (click)="doSomething()" appendTo="body"\n    [style]="{\'width\':\'150px\'}">\n</p-dropdown>\n

\n

现在我们有了组件，我们需要告诉 ag-Grid。所有自定义组件应在配置选项中列出frameworkComponents。因此，让\xe2\x80\x99s 导入我们的自定义单元格渲染器并在配置中指定它：

\n

应用程序组件.ts

\n

frameworkComponents = {\n  primeNgDropdown: PrimeNgDropdownComponent,\n  ^^^^^^^^^^^^^^^\nremember this framework key\n};\n

\n

应用程序组件.html

\n

<ag-grid-angular\n  ...\n  [frameworkComponents]="frameworkComponents"\n

\n

另外，您必须传递此组件才能AgGridModule.withComponents调用：

\n

@NgModule({\n  imports:      [ \n      ...\n      AgGridModule.withComponents([PrimeNgDropdownComponent])\n    ],\n

\n

最后，您只需通过在 cellRenderer 选项中指定框架键来指定列使用哪个组件：

\n

columnDefs = [\n  ...\n  {\n    headerName: "DropdownColumn",\n    field: "ddValue",\n    cellRenderer: \'primeNgDropdown\' <----------------- this one\n  }\n];\n

\n

堆栈闪电战示例

\n