aggrid angular8选择列中的下拉列表

npm install --save ag-grid-community ag-grid-angular

import { Component, OnInit } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';
import { AgSelectCellRendererComponent } from 'ag-grid-angular';

@Component({
  selector: 'app-my-grid',
  templateUrl: './my-grid.component.html',
  styleUrls: ['./my-grid.component.css']
})
export class MyGridComponent implements OnInit {
  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' },
    { headerName: 'Gender', field: 'gender' },
    { headerName: 'Country', field: 'country' },
    { headerName: 'City', field: 'city' },
    { headerName: 'Action', cellRenderer: 'selectCellRenderer' }
  ];

  rowData = [
    { name: 'John', age: 25, gender: 'Male', country: 'USA', city: 'New York' },
    { name: 'Jane', age: 30, gender: 'Female', country: 'UK', city: 'London' },
    { name: 'Bob', age: 35, gender: 'Male', country: 'Canada', city: 'Toronto' }
  ];

  frameworkComponents = {
    selectCellRenderer: AgSelectCellRendererComponent
  };

  ngOnInit() {
  }
}

<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [frameworkComponents]="frameworkComponents"
></ag-grid-angular>

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

@Component({
  selector: 'app-ag-select-cell-renderer',
  template: `
    <select (change)="onSelectionChange($event.target.value)">
      <option *ngFor="let option of options" [value]="option">{{ option }}</option>
    </select>
  `
})
export class AgSelectCellRendererComponent implements ICellRendererAngularComp {
  params: any;
  options: string[];

  agInit(params: any): void {
    this.params = params;
    this.options = ['Option 1', 'Option 2', 'Option 3'];
  }

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

  onSelectionChange(value: string) {
    // 处理选择事件
    console.log('Selected value:', value);
    console.log('Selected row data:', this.params.data);
  }
}