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

Question

如何在 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 + 單擊功能）

Answer 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 示例