Angular Ag-Grid:在Ag Grid单元格中将PrimeNg P下拉列表添加为html元素 [英] Angular Ag-Grid: Add PrimeNg P-dropdown as html element in Ag Grid cells
问题描述
如何在Ag-Grid单元格中包含基本HTML元素.
How to include basic HTML elements in Ag-Grid cells.
下面是我在MyComponent.html
<p-dropdown [options]="cars" [(ngModel)]="selectedCar" (click)="doSomething()" [style]="{'width':'150px'}"></p-dropdown>
现在使用ag-grid在其中一个单元格中包含以上p-下拉列表
And ag-grid now to be used to include above p-dropdown in one of the cells
<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函数)
How to include any HTML elements of Angular(including ng-model + click functions) in any Ag-Grid cells
推荐答案
如果要在AgGrid的单元格中使用复杂的HTML,那么该使用单元格渲染器了.
If you want complex HTML inside AgGrid the cells, then it's time to use cell renderers.
您需要定义一个自定义组件,该组件将实现ICellRendererAngularComp
接口并通过agInit
方法接收单元格的值.
You need to define a custom component that will implement ICellRendererAngularComp
interface and receive the value of a cell through the 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
配置选项中列出.因此,让我们导入自定义单元格渲染器并在配置中指定它:
Now that we have our component, we need to tell ag-Grid about it. All custom components should be listed in frameworkComponents
configuration option. So let’s import our custom cell renderer and specify it in the configuration:
app.component.ts
frameworkComponents = {
primeNgDropdown: PrimeNgDropdownComponent,
^^^^^^^^^^^^^^^
remember this framework key
};
app.component.html
<ag-grid-angular
...
[frameworkComponents]="frameworkComponents"
此外,您还必须将此组件传递给AgGridModule.withComponents
调用:
Also, you have to pass this component to AgGridModule.withComponents
call:
@NgModule({
imports: [
...
AgGridModule.withComponents([PrimeNgDropdownComponent])
],
最后,您只需要通过在cellRenderer选项中指定框架键来指定要用于列的组件:
Finally, you only need to specify which component to use for your column through specifying framework key in cellRenderer option:
columnDefs = [
...
{
headerName: "DropdownColumn",
field: "ddValue",
cellRenderer: 'primeNgDropdown' <----------------- this one
}
];
Stackblitz Example
这篇关于Angular Ag-Grid:在Ag Grid单元格中将PrimeNg P下拉列表添加为html元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!