如何在扩展时使用ag-grid angular的master / detail功能和keepDetailRows实现行选择

Question

我已经实现了一个ag-grid主/详细示例，该示例的rowSlection倍数带有一个复选框。但是，当选择主行时，不会选择明细行，而当我选择明细行并折叠明细时，由于网格在GridOptions类上找不到属性keepDetailRows，因此将其销毁。

我的网格配置：

this.gridOptions = {
  masterDetail: true,
  detailRowHeight: 340,
  enableColResize: true,
  enableFilter: true,
  defaultColDef: {
    editable: false
  },
  context: this,
  embedFullWidthRows: true,
  rowSelection: 'multiple',
  // keepDetailRows: true, not found
  onRowSelected: function(params: any) {
    console.log('pppp', params);
    if (params.node.master && params.node.expanded) {
      // params.node.setExpanded(params.node.selected);
      const gridDetailGridInfo = params.api.getDetailGridInfo(params.node.detailNode.id);
      if (gridDetailGridInfo && gridDetailGridInfo.api) {
        gridDetailGridInfo.api.forEachNode(node => {
          node.setSelected(params.node.selected);
        });
      }
    }
  },
  isRowMaster: function(data) {
    return data ? data.order_lines.length > 0 : false;
  }
};
this.gridOptions.detailCellRendererParams = {
  detailGridOptions: {
    rowSelection: 'multiple',
    enableColResize: true,
    enableFilter: true,
    groupSelectsChildren: true,
    width: '100%',
    columnDefs: [
      {
        checkboxSelection: function (params) {
          return true;
        },
        headerName: '',
        suppressSorting: true,
        suppressFilter: true,
        suppressToolPanel: true,
        suppressMovable: true,
        headerCheckboxSelection: true,
        cellRendererParams: { suppressCount: true },
        width: 50,
        suppressMenu: true,
        cellStyle: {
          'line-height': '5em',
        },
        cellRenderer: 'agGroupCellRenderer'
      },
      {
        // headerName: 'Order line Id',
        field: 'order_line_id',
        cellRenderer: 'agGroupCellRenderer',
        hide: true
      },
      {
        headerName: 'Etat',
        field: 'state',
      },
      {
        headerName: 'Titre',
        field: 'title'
      },
      {
        headerName: 'SKU',
        field: 'sku'
      },
      {
        headerName: 'Quantité',
        field: 'quantity'
      },
      {
        headerName: 'Prix',
        field: 'price_ht'
      },
      {
        headerName: 'Prix total',
        field: 'price_ttc'
      }
    ],
    defaultColDef: {
      editable: false
    },
    context: this,
    onFirstDataRendered(params) {
      console.log('onFirstDataRendered params', params);
      params.api.sizeColumnsToFit();
    },
    onRowSelected: function(params) {
      console.log('details row selected', params);
    }
  },
  getDetailRowData: function(params) {
    console.log('getDetailRowData params', params);
    params.successCallback(params.data.order_lines);
  }
};
this.gridOptions.columnDefs = [
  {
    checkboxSelection: function (params) {
      return true;
    },
    headerName: '',
    suppressSorting: true,
    suppressFilter: true,
    suppressToolPanel: true,
    suppressMovable: true,
    headerCheckboxSelection: true,
    cellRendererParams: { suppressCount: true },
    width: 50,
    suppressMenu: true,
    cellStyle: {
      'line-height': '5em',
    },
  },
  {
    headerName: 'Order id',
    field: 'order_id',
    hide: true
  },
  {
    headerName: 'Date de la vente',
    field: 'date_payment',
    cellRenderer: 'agGroupCellRenderer'
  },
  {
    headerName: 'Numéro de commande',
    field: 'marketplace_order_id'
  },
  // {
  //   headerName: 'Marketplace',
  //   field: 'marketplace'
  // },
  {
    headerName: 'Achéteur',
    field: 'last_name' },
  {
    headerName: 'Quantité',
    field: 'quantity' },
  {
    headerName: 'Prix TTC',
    field: 'price_ttc' }
];