与ag-Grid的数据绑定

Question

我正在使用ag-Grid显示一些数据。我希望在单击网格的单元格后将此数据传递到另一个界面。我想知道这是否可能，如果可以，我使用什么功能。我考虑过使用makeCellClicked，但我不确定，我不确定是否可以使用ngModel，因为我的html不包含标签。这是我的2个界面：

这是我的grid.ts代码：

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Grid, GridApi } from 'ag-grid-community';
import { AgGridAngular } from 'ag-grid-angular';
import { DealsService } from '../services/deals.service';
import * as moment from 'moment';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  showNav = true;

  private gridApi;
  gridOptions = {
    rowHeight :90,
    rowSelection: 'single',
    headerHeight:60,
    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [

    {
      headerName: 'ID details',
      children: [


       {
      headerName: 'Deal',
      field:'DEALID',
      width:300,
      resizable:true,
      onCellClicked: this.makeCellClicked.bind(this),
      filter: 'agNumberColumnFilter',


       },
       {
        headerName:'Block',
        field:'BLOCKID',
        width:200,
        resizable:true,
        filter: 'agNumberColumnFilter',
        columnGroupShow:'open',
      },
      ],
    },
    {
      headerName: 'Dates',
      children: [
        {
          headerName:'Trade',

      field : 'TRADEDATE',
      valueFormatter : this.dateFormatter,
      width:300,
      resizable:true,
      filter : 'agDateColumnFilter',
      filterParams: {          //inRangeInclusive: true,
        comparator: function(filterLocalDateAtMidnight, cellValue) {
        //using moment js
        var dateAsString = moment(cellValue).format('DD/MM/YYYY');
        var dateParts = dateAsString.split("/");
        var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

        if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
        return 0
        }

        if (cellDate < filterLocalDateAtMidnight) {
        return -1;
        }

        if (cellDate > filterLocalDateAtMidnight) {
        return 1;
        }
      } ,        
    },},
    {
      headerName: 'Start',
      field : 'STARTDATE',
      columnGroupShow:'open',
      valueFormatter : this.dateFormatter,
      width:200,
      resizable:true,
      filter : 'agDateColumnFilter',
      filterParams: {          //inRangeInclusive: true,
      comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
      return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
      return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
      return 1;
      }
      }
      },

    },
    {
      headerName: 'End',
      field : 'ENDDATE',
      columnGroupShow:'open',
      valueFormatter : this.dateFormatter,
      width:200,
      resizable:true,
      filter : 'agDateColumnFilter',
      filterParams: {
      //inRangeInclusive: true,
      comparator: function(filterLocalDateAtMidnight, cellValue) {
      //using moment js
      var dateAsString = moment(cellValue).format('DD/MM/YYYY');
      var dateParts = dateAsString.split("/");
      var cellDate = new Date(Number(dateParts[2]), Number(dateParts[1]) - 1, Number(dateParts[0]));

      if (filterLocalDateAtMidnight.getTime() == cellDate.getTime()) {
      return 0
      }

      if (cellDate < filterLocalDateAtMidnight) {
      return -1;
      }

      if (cellDate > filterLocalDateAtMidnight) {
      return 1;
      }
      }
      },},],
    },   


  {
    headerName:'Deal informations',
    children: [
      {
        headerName:'Class',
      field:'DEALCLASS',
      width:300,
      resizable:true,
      filter:true,
      columnGroupShow:'everything else',

    },
    {
      headerName: 'Instr Class',
      field:'INSTRCLASS',
      width:200,
      resizable:true,
      filter: true,
      columnGroupShow:'open',

    },
    {
      headerName: 'Type',
      field:'DEALTYPE',
      width:250,
      resizable:true,
      sortable: false,
      columnGroupShow:'open',
      filter:true,

    },
      {
    headerName: 'Folder' ,
    field:'FOLDERSHORTNAME',
    cellEditor: "agRichSelectCellEditor",
    cellEditorParams: {
      values:['slim','slouma'],

    },
    filter:true,
    width:200,
    resizable:true,
    columnGroupShow:'open',

  },
  {
    headerName: 'Cpty' ,
    field:'CPTYSHORTNAME',
    width:130,
    resizable:true,
    filter: true,
    columnGroupShow:'open',

   },


  {
    headerName: 'Name',
    field:'INSTRNAME',
    width:250,
    resizable:true,
    sortable: false,
    filter:true,
    columnGroupShow:'open',

  },
  {
    headerName: 'Short Name',
    field:'INSTRSHORTNAME',
    width:250,
    resizable:true,
    sortable: false,
    filter:true,
    columnGroupShow:'open',

  },
  {
    headerName: 'Category',
  field: 'DEALCAT',
    width:200,
    resizable:true,
    sortable: false,
    filter:true,
    columnGroupShow:'open',

  },



], },


  {
    headerName:'Pricing ',
    children: [
      {

        headerName: 'Settlement Amount',
        field:'SETTLEAMT',
        width:300,
        resizable:true,
        sortable: false,
        filter:'agNumberColumnFilter'
      },
      {

    headerName: 'Quantity',
    field:'QUANTITY',
    width:200,
    resizable:true,
    sortable: false,
    columnGroupShow:'open',
    filter:'agNumberColumnFilter'


  },

  {
    headerName: 'Rate',
    field:'FLOATINGRATESSHORTNAME',
    width:200,
    resizable:true,
    sortable: false,
    columnGroupShow:'open',
    filter:'agTextColumnFilter'


  },
  {

    headerName: 'Fees',
    field:'RENTSPREADFIXEDRATE',
    width:200,
    resizable:true,
    sortable: false,
    columnGroupShow:'open',
    filter:'agNumberColumnFilter'


  },],
},
{

  headerName: 'Status',
  field:'WORKFLOWSTATE',
  width:200,
  resizable:true,
  sortable: false,
  filter:true,
},
];







rowData : any;

constructor(private service:DealsService) {}
dateFormatter(params){
return moment(params.value).format('DD/MM/YYYY');
}

onBtExport() {
  var params = {
    allColumns : true,
    columnSeparator: ';',
   // columnKeys: ['BLOCKID','DEALID','DEALCLASS','INSTRCLASS','TRADEDATE','STARTDATE','FOLDERSHORTNAME','CPTYSHORTNAME',function(params){  return   params.data.INSTRSHORTNAME + '<br/>' + params.data.INSTRNAME} ,'QUANTITY'+ 'SETTLEAMT','FLOATINGRATESSHORTNAME'+'RENTSPREADFIXEDRATE','DEALCAT'+'DEALTYPE','ENDDATE']
  };



 this.gridApi.exportDataAsCsv(params);
}
onGridReady(params) {
  this.gridApi = params.api; 
}

getDropDownlist(){
  this.service.getDealsList().subscribe(data => this.rowData = data);

  }



  makeCellClicked() {
    console.log('Make cell clicked');

  }

ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
}); 

}
}

这里是grid.html：

 <ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
     style="    min-width: 40%; max-width: 57%;
     height: 975px; margin-left: auto; margin-right: auto; "
     class="ag-theme-alpine"
     [rowData]="rowData"
     [columnDefs]="columnDefs"
     [gridOptions]="gridOptions"
     [animateRows]="true"
    singleClickEdit="true"
     [paginationPageSize]="10"
     [pagination]="true"
     (gridReady)="onGridReady($event)"

      >

 </ag-grid-angular>
 <label>
 <button (click)="onBtExport()" class="btn btn-success" style="  margin-right: 135px; "> Export to csv </button>
</label>

非常感谢您的帮助。

Answer 1

将此添加到HTML中的ag网格标签：

(selectionChanged)="onSelectionChanged($event)"

然后您可以在此功能中访问选定的行：

onSelectionChanged() {
  var selectedRows = this.gridApi.getSelectedRows();
}

如果您要访问所有的ag-grid数据而不仅仅是选定的行，则可以使用此方法：

this.gridApli.getModel();

这将使您在分组和筛选后在Grid上显示数据。