要在Ag Grid单元格中将PrimeNg P-dropdown作为HTML元素添加,可以按照以下步骤进行操作:
npm install ag-grid-angular primeicons primeng
app.module.ts
文件,并添加以下代码:import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AgGridModule } from 'ag-grid-angular';
import { DropdownModule } from 'primeng/dropdown';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
AgGridModule.withComponents([]),
DropdownModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
文件,并添加以下代码:
app.component.ts
文件,并添加以下代码:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
rowData: any[];
columnDefs: any[];
constructor() {
this.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
];
this.columnDefs = [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price', cellRenderer: 'dropdownRenderer' }
];
}
}
app.component.ts
文件中添加以下代码:import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
rowData: any[];
columnDefs: any[];
constructor() {
this.rowData = [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
];
this.columnDefs = [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price', cellRenderer: 'dropdownRenderer' }
];
}
dropdownRenderer(params: any) {
return ` `;
}
}
以上代码示例中,通过定义一个名为dropdownRenderer的方法,使用P-dropdown组件来渲染表格中的单元格。在columnDefs中,将需要使用P-dropdown的单元格的cellRenderer属性设置为'dropdownRenderer'。
这样,就可以在Ag Grid单元格中将PrimeNg P-dropdown作为HTML元素添加。