如何在Ag-Grid Angular中添加下拉菜单？

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-dropdown',
  template: `
    <select [(ngModel)]="selectedOption">
      <option *ngFor="let option of options" [value]="option">{{ option }}</option>
    </select>
  `
})
export class DropdownComponent {
  @Input() options: string[];
  selectedOption: string;
}

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-dropdown-renderer',
  template: `
    <app-dropdown [options]="params.options"></app-dropdown>
  `
})
export class DropdownRendererComponent implements ICellRendererAngularComp {
  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    return false;
  }
}

<ag-grid-angular [rowData]="rowData" [columnDefs]="columnDefs">
  <ng-template ngFor [ngForOf]="frameworkComponents" let-renderer="$implicit" let-col="column" [ngForTrackBy]="trackByFn">
    <ag-grid-column [headerName]="col.headerName" [field]="col.field" [cellRenderer]="renderer"></ag-grid-column>
  </ng-template>
</ag-grid-angular>

import { Component } from '@angular/core';
import { DropdownRendererComponent } from './dropdown-renderer.component';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent {
  rowData: any[];
  columnDefs: any[];
  frameworkComponents: any;
  renderer: any;

  constructor() {
    this.rowData = [/* 数据源 */];
    this.columnDefs = [
      { headerName: '列名', field: '字段名', cellRenderer: 'dropdownRenderer' }
      // 其他列定义
    ];
    this.frameworkComponents = {
      dropdownRenderer: DropdownRendererComponent
    };
    this.renderer = 'dropdownRenderer';
  }
}