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

Posted 2023-03-28

【中文标题】Angular Ag-Grid：在 Ag Grid 单元格中添加 PrimeNg P-dropdown 作为 html 元素

【英文标题】：Angular Ag-Grid: Add PrimeNg P-dropdown as html element in Ag Grid cells

【发布时间】：2020-11-16 01:11:46

【问题描述】：

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

下面是我在MyComponent.html 中的 html PrimeNg p-dropdown

<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 + click 函数）

【参考方案1】：

如果您想要在 AgGrid 单元格中使用复杂的 HTML，那么是时候使用单元格渲染器了。

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

prime-ng-dropdown.component.ts

import  Component, OnInit  from "@angular/core";
import  ICellRendererAngularComp  from "ag-grid-angular";
import  ICellRendererParams  from "ag-grid-community";
@Component(
  selector: "app-prime-ng-dropdown",
  templateUrl: "./prime-ng-dropdown.component.html",
  styleUrls: ["./prime-ng-dropdown.component.css"]
)
export class PrimeNgDropdownComponent implements ICellRendererAngularComp 
  params: ICellRendererParams;

  cars = [
     label: "Honda", value: "eHonda" ,
     label: "Jaguar", value: "fJaguar" ,
     label: "Mercedes", value: "gMercedes" 
  ];

  agInit(params: ICellRendererParams): void 
    this.params = params;
  

  onChange(value) 
    this.params.data[this.params.colDef.field] = value;
  

  refresh() 
    return true;
  

  doSomething() 

prime-ng-dropdown.component.html

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

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

app.component.ts

frameworkComponents = 
  primeNgDropdown: PrimeNgDropdownComponent,
  ^^^^^^^^^^^^^^^
remember this framework key
;

app.component.html

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

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

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

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

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

Stackblitz Example

【讨论】：

这真的帮助我了解更多...:) @yurzui 有一个疑问，因为我无法为 p-dropdowns 单独创建自定义组件，我在同一页面中有所有 5 个 p-dropdowns，我只是需要用 Ag-Grid 替换它。在这种情况下现在该怎么办？？

我没有得到你的要求。是否要更改单元格模板或将下拉列表替换为网格？

一页有 9 个 p-dropdowns，我只需要将它们放在 Ag-Grid 中。简而言之，用 Ag-Grid 替换它们。但是根据您的解决方案，我必须创建 9 个单独的组件，这对我来说是不可能的