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

Question

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

以下是我在MyComponent.html中的html PrimeNg p下拉列表

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

现在，ag网格将用于在的一个单元格中包括上述p下拉列表

<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网格单元格中包含Angular的任何HTML元素(包括ng模型+点击功能(

Answer 1

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

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

启动下拉列表组件.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() {}
}

priming下拉列表.component.html

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

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

应用程序组件.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
}
];

Stacklitz示例