AgGrid Take an isolated result

I have a series of data that is organized in a table (agGrid), and when I see the detail of the father, I want his data to go out in a normal way instead of leaving in a daughter table. "<p></p>"

My intention is to show it in the child.

html

<ag-grid-angular #agGrid id="promotionsList" class="ag-theme-balham aggrid--size-10-rows" [rowData]="rowData" [columnDefs]="columnDefs"
  [enableFilter]="true" [rowSelection]="rowSelection" (selectionChanged)="onSelectionChanged($event)" [suppressMenuHide]="true"
  [suppressRowClickSelection]="true" [masterDetail]="true" [detailCellRendererParams]="detailCellRendererParams" (gridReady)="onGridReady($event)">
</ag-grid-angular>
<span id="selectedRows" class='aggrid--selectRows'></span>

<section>


  <p>{{ child }}</p>

</section>

Json

[
  {
    "Id": "1",
     "callRecords": [
                  {
             "note":
                   "1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo"
                 }
          ]  
    }
]

ts

constructor(private http: HttpClient){
 this.gridOptions = <GridOptions>{}; 
      this.columnDefs = [
        {
          headerName: Id,
          field: 'Id',
        }
     ];
   this.detailCellRendererParams = {
      // IMPORTANT !  Show Details rows
      getDetailRowData: function(params) {
        params.successCallback(params.data.callRecords);
        console.log(params.data.callRecords['note']);
      }
    }; // End Render detail

    this.rowSelection = 'multiple';
  } // End Construct

onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    //I get service and I shows datas and count the rows
    this.http.get('/api/probar').subscribe(data => {
      params.api.setRowData(data);

    });

    params.api.sizeColumnsToFit();
  }

But before I can show it, I'm doing a console.log to see if I can access the child's field, but it gives an error, so I do not understand if it did:

 params.successCallback(params.data.callRecords);

the children were shown in a table, because I can not directly access a child field:

 console.log(params.data.callRecords[0]['note']);
 console.log(params.data.callRecords['note']);

Error:

ag-Grid: could not find detail grid options for master detail, please set gridOptions.detailCellRendererParams.detailGridOptions


core.js:1449 ERROR TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Function.webpackJsonp../node_modules/ag-grid/dist/lib/utils.js.Utils.cloneObject (utils.js:176)
    at DetailCellRenderer.webpackJsonp../node_modules/ag-grid-enterprise/dist/lib/rendering/detail/detailCellRenderer.js.DetailCellRenderer.createDetailsGrid (detailCellRenderer.js:116)
    at DetailCellRenderer.webpackJsonp../node_modules/ag-grid-enterprise/dist/lib/rendering/detail/detailCellRenderer.js.DetailCellRenderer.init (detailCellRenderer.js:36)
    at ComponentResolver.webpackJsonp../node_modules/ag-grid/dist/lib/components/framework/componentResolver.js.ComponentResolver.initialiseComponent (componentResolver.js:295)
    at ComponentResolver.webpackJsonp../node_modules/ag-grid/dist/lib/components/framework/componentResolver.js.ComponentResolver.createAgGridComponent (componentResolver.js:246)
    at rowComp.js:690
    at rowContainerComponent.js:55
    at Array.forEach (<anonymous>)
    at RowContainerComponent.webpackJsonp../node_modules/ag-grid/dist/lib/rendering/rowContainerComponent.js.RowContainerComponent.flushRowTemplates (rowContainerComponent.js:55)