Angular 使用ag网格通过@input decorator传递数据
我试图通过单击行将数据从ag网格传递到新组件中的表单。我可以通过onCellClicked单击单元格从行中获取数据,现在我不知道如何在表单组件中获取数据并显示它。我曾想过使用@input装饰器,但我不确定如何使用。 以下是我的两个界面: 这是我的密码: ag-Grid.ts: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 {
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单元时,将数据存储在服务中。在表单组件中,当您转到表单组件时,读取存储的数据并将其显示在表单中。