Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/typescript/8.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Angular 使用ag网格通过@input decorator传递数据_Angular_Typescript_Ag Grid_Pass Data - Fatal编程技术网

Angular 使用ag网格通过@input decorator传递数据

Angular 使用ag网格通过@input decorator传递数据,angular,typescript,ag-grid,pass-data,Angular,Typescript,Ag Grid,Pass Data,我试图通过单击行将数据从ag网格传递到新组件中的表单。我可以通过onCellClicked单击单元格从行中获取数据,现在我不知道如何在表单组件中获取数据并显示它。我曾想过使用@input装饰器,但我不确定如何使用。 以下是我的两个界面: 这是我的密码: ag-Grid.ts: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import {

我试图通过单击行将数据从ag网格传递到新组件中的表单。我可以通过onCellClicked单击单元格从行中获取数据,现在我不知道如何在表单组件中获取数据并显示它。我曾想过使用@input装饰器,但我不确定如何使用。 以下是我的两个界面: 这是我的密码:

ag-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';
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 {    
  private gridApi;
  gridOptions = {
    rowHeight :90,
    headerHeight:60,

    defaultColDef: {
      sortable: true
  },
  }
  columnDefs = [
       {
      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',
      },
      ],
    },
   
];

rowData : any; 
constructor(private service:DealsService) {}

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

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

  }
makeCellClicked(event) {
    console.log(event.data);
}

ngOnInit() {
this.service.getDealsList().subscribe(data => {
  this.rowData = data;
}); 
}
}
表格2.ts:

import { Component, OnInit , Input} from '@angular/core';
import {NgForm} from '@angular/forms';
import { DecimalPipe } from '@angular/common';
import { Repo } from '../models/repo-models';
import { DealsService } from '../services/deals.service';


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

constructor(public service: DealsService) {}

ngOnInit(): void {
}

}
ag-Grid.html:

<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
style="width: 1350px; height: 630px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
(selectedRows) = "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
<div style="display:flex;" class="panel panel-default">
    <div style="width: 500px; height: 500px;"></div>
 <form   autocomplete="off" >
    <div class="form-group">
        <label>Folder</label>
        <input required type="text" id="folder"  placeholder="Enter a 
  folder" name="Folder" style="width: 400px;">
      </div>
    </form>

form.html:

<ag-grid-angular class="ag-theme-balham" ng-grid="gridOptions"
style="width: 1350px; height: 630px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
(selectedRows) = "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
<div style="display:flex;" class="panel panel-default">
    <div style="width: 500px; height: 500px;"></div>
 <form   autocomplete="off" >
    <div class="form-group">
        <label>Folder</label>
        <input required type="text" id="folder"  placeholder="Enter a 
  folder" name="Folder" style="width: 400px;">
      </div>
    </form>

文件夹

我真的很感谢你们的帮助。谢谢大家!

其中的关系是
form.ts
ag grid.ts
?他们是西伯利亚人吗?您可以使用父子关系将数据作为输入提交,也可以使用
服务
…它们是不相关的组件。请看这里,您能否详细说明表单组件的呈现方式?作为ag网格所在页面的一部分,或者作为用户单击单元格时呈现的其他url的一部分?确定。那么你必须使用一种服务。创建一个服务并将其注入网格组件,当您单击id单元时,将数据存储在服务中。在表单组件中,当您转到表单组件时,读取存储的数据并将其显示在表单中。其中的关系是
form.ts
ag grid.ts
?他们是西伯利亚人吗?您可以使用父子关系将数据作为输入提交,也可以使用
服务
…它们是不相关的组件。请看这里,您能否详细说明表单组件的呈现方式?作为ag网格所在页面的一部分,或者作为用户单击单元格时呈现的其他url的一部分?确定。那么你必须使用一种服务。创建一个服务并将其注入网格组件,当您单击id单元时,将数据存储在服务中。在表单组件中,当您转到表单组件时,读取存储的数据并将其显示在表单中。