如果您希望 AgGrid 单元格内有复杂的 HTML,那么就该使用单元格渲染器了。
您需要定义一个将实现的自定义组件ICellRendererAngularComp
接口并通过以下方式接收单元格的值agInit
method.
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
配置选项。因此,让我们导入自定义单元格渲染器并在配置中指定它:
应用程序组件.ts
frameworkComponents = {
primeNgDropdown: PrimeNgDropdownComponent,
^^^^^^^^^^^^^^^
remember this framework key
};
应用程序组件.html
<ag-grid-angular
...
[frameworkComponents]="frameworkComponents"
另外,您必须将此组件传递给AgGridModule.withComponents
call:
@NgModule({
imports: [
...
AgGridModule.withComponents([PrimeNgDropdownComponent])
],
最后,您只需通过在 cellRenderer 选项中指定框架键来指定列使用哪个组件:
columnDefs = [
...
{
headerName: "DropdownColumn",
field: "ddValue",
cellRenderer: 'primeNgDropdown' <----------------- this one
}
];
堆栈闪电战示例 https://stackblitz.com/edit/ag-grid-install-and-simple-example-angular-7-ooqhhv?file=src%2Fapp%2Fapp.component.ts