如何在angular中控制ag grid detailCellRendererParams中的masterdetail

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

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html',
  styleUrls: ['./grid.component.css']
})
export class GridComponent {
  columnDefs = [
    // 定义列的配置
    { headerName: 'Name', field: 'name' },
    { headerName: 'Age', field: 'age' },
    { headerName: 'Address', field: 'address' }
  ];

  rowData = [
    // 定义行数据
    { name: 'John', age: 25, address: '123 Street' },
    { name: 'Jane', age: 30, address: '456 Avenue' },
    { name: 'Bob', age: 35, address: '789 Road' }
  ];

  // 定义detailCellRendererParams
  detailCellRendererParams = {
    detailGridOptions: {
      columnDefs: [
        { headerName: 'Product', field: 'product' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { product: 'Apple', price: '$1.99' },
        { product: 'Banana', price: '$0.99' },
        { product: 'Orange', price: '$2.49' }
      ]
    },
    getDetailRowData: function(params) {
      params.successCallback(params.data.products);
    }
  };
}

<ag-grid-angular 
  style="width: 500px; height: 200px;" 
  class="ag-theme-alpine"
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
  [detailCellRenderer]="'agGroupCellRenderer'"
  [detailCellRendererParams]="detailCellRendererParams">
</ag-grid-angular>