在Angular 8中使用param函数动态改变ag-grid的单元渲染器

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

@Component({
  selector: 'app-dynamic-renderer',
  template: `
    <span [ngStyle]="getStyle()">{{ value }}</span>
  `
})
export class DynamicRendererComponent {
  @Input() value: any;
  @Input() param: any;

  getStyle(): any {
    // 根据param的值返回对应的样式
    if (this.param === 'value1') {
      return { color: 'red' };
    } else if (this.param === 'value2') {
      return { color: 'blue' };
    } else {
      return {};
    }
  }
}

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

@Component({
  selector: 'app-grid',
  template: `
    <ag-grid-angular
      style="width: 500px; height: 300px;"
      class="ag-theme-alpine"
      [rowData]="rowData"
      [columnDefs]="columnDefs"
    ></ag-grid-angular>
  `
})
export class GridComponent {
  rowData = [
    { name: 'John', param: 'value1' },
    { name: 'Jane', param: 'value2' }
  ];

  columnDefs = [
    { headerName: 'Name', field: 'name' },
    { headerName: 'Param', field: 'param', cellRendererFramework: DynamicRendererComponent }
  ];
}