不显示detailCellRendererParams的ag-grid数据

Question

我正在尝试在现有网格内添加嵌套网格。我对此很陌生，尽管我能够显示网格，但似乎无法显示数据。当我执行console.log（params）时，我拥有了所有数据，但是无论尝试什么，都无法显示数据。我认为问题出在我的getDetailRowData以及传递给successCallback函数的问题上。有什么想法吗？

这是我的ts文件

import { Component, OnInit } from '@angular/core';
import { ReportService } from 'src/app/services/report.service';
import { Report } from 'src/app/models/report';
import { agThemeSgBootstrap } from "@sg-bootstrap/ag-grid";
import {GridOptions, Module} from 'ag-grid-community';
import { DatePipe } from '@angular/common';


@Component({
  selector: 'app-report',
  templateUrl: './report.component.html',
  styleUrls: ['./report.component.scss']
})
export class ReportComponent implements OnInit {

  apiUrl: any;
  reports : Report[];
  gridOptions: GridOptions;
  dateValue = new Date();
  maxDate = new Date();
  private detailCellRendererParams;
  private columnDefs;
  // public modules: Module[] = AllModules;



  constructor(private reportService : ReportService, private datePipe: DatePipe) {

    this.columnDefs = [
      {headerName: 'Report Name', field: 'reportName', cellRenderer: 'agGroupCellRenderer',
        resizable: true,
        valueGetter: params => { return `${params.data.reportName}.dat` }},
      {headerName: 'Sent to FIS', field: 'sentToFis',resizable: false,
        valueGetter: params => { return params.data.sentToFis === true ? "Yes" : "No"  } },
      {headerName: 'File Size', field: 'contentLength', resizable: true,
        valueGetter: params => { return `${this.formatBytes(params.data.contentLength)}` }},
      {headerName: 'Last Modified', field: 'lastModified', resizable: true,
        valueGetter: params => { return this.datePipe.transform(params.data.lastModified, "yyyy-MM-dd HH:mm:ss") }},
          ];

    this.detailCellRendererParams = {
      detailGridOptions: {
        columnDefs: [
          {headerName: 'ADSL Path', field: 'adslPath', resizable: true,
            valueGetter: params => { return params.data.adlsFullPath}},
          {headerName: 'Version', field: 'version', resizable: true,
            valueGetter: params => { return params.data.sentToFis}},
          {headerName: 'Source', field: 'source', resizable: true,
            valueGetter: params => { return params.data.adlsFullPath}},
        ],
      },
      getDetailRowData: function(params) {
        params.successCallback(params.data.children);
        console.log(params.data);

              }
        }
      }


  ngOnInit() {
    this.callReportService(new Date())
  }

  reportDateChange(value: Date) {

    let currentValue = this.datePipe.transform(this.dateValue, "yyyyMMdd")
    let newSelectedValue = this.datePipe.transform(value, "yyyyMMdd")
    if (currentValue != newSelectedValue) {
      if (this.gridOptions.api) {
        this.gridOptions.api.showLoadingOverlay();
      }
      this.callReportService(value)
      this.dateValue = value;
    }
  }

  callReportService(value: Date) {
    this.reportService.getReportsForDate(value).subscribe(x=> {
      this.reports = x;
      this.gridOptions.api.sizeColumnsToFit();

    })
  }

  ngAfterContentInit() {
    let agOpt = { ...{
      animateRows: true,
        enableRangeSelection: true,
        defaultColDef: {
          editable: false,
          enableValue: false,
          enableRowGroup: false,
          enablePivot: true,
          filter: true,
          sortable: true
        },
      statusBar: {
        statusPanels: [{
            statusPanel: 'agTotalRowCountComponent',
            align: 'left'
          },
          {
            statusPanel: 'agFilteredRowCountComponent'
          },
          {
            statusPanel: 'agSelectedRowCountComponent'
          },
          {
            statusPanel: 'agAggregationComponent'
          },
        ],
      }
     }, ...agThemeSgBootstrap }
    this.gridOptions  = { ...this.gridOptions, ...agOpt }
  }

  onGridReady(params) {
    params.api.setDomLayout("autoHeight");
    params.api.sizeColumnsToFit();
  }

  onGridSizeChanged(params) {
    params.api.sizeColumnsToFit();
  }

  ngAfterViewInit() {

    this.dateValue = new Date()


  }

  formatBytes(bytes, decimals = 2) {
    if (bytes === 0) return '0 Bytes';

    const k = 1024;
    const dm = decimals < 0 ? 0 : decimals;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

    const i = Math.floor(Math.log(bytes) / Math.log(k));

    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

}

我的html文件

<div class="container-fluid">
    <div class="col-xs-12 col-12 col-md-3 form-group row">
      <label for="reportDate" class="col-form-label">Report Date:</label>
      <div class="col-sm-4 col-md-7">
          <input id="reportDate"
          class="form-control"
          #dp="bsDatepicker"
          (bsValueChange)="reportDateChange($event)"
          [maxDate]="maxDate"
          bsDatepicker
          [bsValue]="dateValue" [bsConfig]="{ isAnimated: true, adaptivePosition: true, dateInputFormat: 'YYYY-MM-DD', containerClass: 'theme-red' }"/>
      </div>

    </div>
  <div class="row">
    <div class="col">
        <ag-grid-angular
        style="width: 100%; height: 300px;"
        class="ag-theme-sg-bootstrap"
        [gridOptions]="gridOptions"
        [masterDetail]="true"
        [detailCellRendererParams]="detailCellRendererParams"
        [rowData]="reports"
        [columnDefs]="columnDefs"
        (gridReady)="onGridReady($event)"
        (gridSizeChanged)="onGridSizeChanged($event)">
      </ag-grid-angular>
    </div>
  </div>
</div>