Javascript 将数据从ag网格传递到另一个接口

我正在使用ag网格显示一些数据。我希望在单击网格的某个单元格后，将此数据传递到另一个界面。我使用了CellRenderFramework并创建了RouterLinkRenderComponent，通过单击单元格从网格传递到另一个界面。 但是，现在我需要将ag网格的数据输入到我的表单中。 以下是我的两个界面：

这是我的代码：

ag-Grid.ts：

和form.html：

---

我想剩下的工作是form.ts和form.html，我非常感谢您的帮助。谢谢大家!

传递给onCellClicked处理程序的CellClicked事件包含一个“value”属性，该属性是单元格的值。您可以使用它传递到您的表单。

这很有帮助，谢谢。然而，要传递到我的表单，我应该使用@input和@output属性来完成吗？我想这取决于onCellClicked处理程序相对于网格的位置。如果它们在不同的组件中，那么是的，您可以在包含表单的组件上使用@Input。My onCellClicked在grid.ts中，但网格和表单是不相关的组件。使用@Input decorator仍然可行吗？不，您可能希望使用共享服务。

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';
import { RouterLinkRendererComponent } from '../router-link-renderer/router-link-renderer.component';
@Component({
  selector: 'app-deals',
  templateUrl: './deals.component.html',
  styleUrls: ['./deals.component.scss']
})
export class DealsComponent implements OnInit {
  showNav = true;

  private gridApi;
  gridOptions = {
    rowHeight :90,
    headerHeight:60,

    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [

    {
      headerName: 'ID details',
      children: [


       {
      headerName: 'Deal',
      field:'DEALID',
      cellRendererFramework: RouterLinkRendererComponent,
      cellRendererParams: {
        inRouterLink: '/Repo'
      },
      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',
    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;
}); 

}
}

import { Component, OnInit } from '@angular/core';
import { AgRendererComponent } from 'ag-grid-angular';

@Component({
  selector: 'app-router-link-renderer',
  templateUrl: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>',
  styleUrls: ['./router-link-renderer.component.scss']
})
export class RouterLinkRendererComponent implements AgRendererComponent {

  params: any;

  agInit(params: any): void {
    this.params = params;
  }

  refresh(params: any): boolean {
    return false;
  }
}

import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';
import { RepoService } from '../services/repo.service';
import { DecimalPipe } from '@angular/common';

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


  constructor() { }





  ngOnInit(): void {


  }

}

<div style="display:flex;" class="panel panel-default">
    <div style="width: 500px; height: 500px;"></div>
 <form  #f="ngForm" autocomplete="off" >
    <div class="form-group" >
        <label>Folder</label>
        <input required type="text"  id="folder"  placeholder="Enter a folder" name="Foldr"   style="width: 400px;">
      </div>



      <div class="form-group">
          <label >Type</label>
          <select required  id="Typee" name="Typee"  style="width: 200px;">
               <option>Loan</option>
              <option>Borrow</option>
            </select>
      </div>
      <div class="form-group" >

        <label >Cpty</label>
         <select required type="text"   id="isin" placeholder="Enter the Cpty" name="Cpty"  style="width: 400px;">
    <option>BNP</option>
    <option>SG</option>
    <option>ODDO BHF</option>
         </select>  
      </div>
      <div class="form-group" >

        <label >Sec. ShortName</label>
         <input required type="text"   id="isin" placeholder="Enter the ShortName" name="secshortname"  style="width: 400px;">

      </div>
        <div class="form-group">
          <label >Trade Date</label>
          <input readonly   id="Trade" name="Trade_date"   style="width: 400px;">
        </div>

        <div class="form-group">
          <label >Start Date</label>
          <input required type="date"  id="Start" name="Start_date"  style="width: 400px;" >

        </div>

        <div class="form-group">
          <label >End Date</label>
          <input required type="date"  id="End" name="End_date" value="currentDate"  style="width: 400px;">

        </div>

        <div class="form-group">
          <label >Quantity</label>
          <input required type="number"  id="Quantity"  placeholder="Enter the Quantity" name="quantity"  style="width: 400px;">
        </div>

        <div class="form-group">
          <label >Price</label>
          <input required type="number"  id="Price"  placeholder="Enter the Price" name="Price"  style="width: 400px;">
        </div>
        <div class="form-group">
          <label >Gross Amount</label>
          <input required type="number"  id="Price"  placeholder="Enter the Gross Amount" name="Price"  style="width: 400px;">
          <select type="text">
            <option>EUR</option>
            <option>GBP</option>
            <option>JPY</option>

          </select>
        </div>
        <div class="form-group">
            <label >Haircut</label>
            <input required type="number"  id="Haircut"  placeholder="Enter the Haircut" name="Haircut"  style="width: 400px;">
          </div>

        <div class="form-group">
          <label >Collateral</label>
          <input required type="number"  id="Collateral"  placeholder="Enter the Collateral" name="Collateral" style="width: 400px;">
        </div>

        <div class="form-group" >

            <label >Clearing Mode *</label>
             <select required type="text"   id="isin" placeholder="Enter the Cpty" name="Cpty"  style="width: 400px;">
        <option>EURCL_BK - E/C 15221</option>
        <option>EURCL_FR - DOM 585</option>
        <option>ODDO . ODDO</option>
             </select>
          </div>
          <div class="form-group" >

            <label >Basis</label>
             <select required type="text"   id="isin" placeholder="Enter the Cpty" name="Cpty"  style="width: 400px;">
        <option>ACT_360</option>
        <option>ACT_365</option>
        <option>ACT_ACT</option>
             </select>
          </div>
          <div class="form-group" >

            <label >Purpose</label>
             <select required type="text"   id="isin" placeholder="Enter the Cpty" name="Cpty"  style="width: 400px;">
        <option>IO - INTERMEDIATION OPCVM</option>
        <option>CS - COUVERTURE DE SHORT</option>
        <option>FI - FINANCEMENT</option>
             </select>
          </div>

          <div class="form-group" >

            <label >Comment</label>
             <input  type="text"   id="isin" placeholder="Enter your comment" name="comment"  style="width: 400px;">

          </div>
    </form>
       <div style="width: 350px;"></div>




      <div class="content" style="float: right; margin-top: -50px;">
        <button class="btn btn-primary" type="reset">Clear</button>
        <span style="display: inline-block; width: 5px;"></span>      
           <button class="btn btn-danger" >Delete</button>
           <span style="display: inline-block; width: 5px;"></span>      

              <button class="btn btn-success">FO Validate</button>
        </div>


</div>