Javascript 在Ag网格中使用buttonRenderer传递数据
我试图通过点击ag网格中的单元格在两个不相关的组件之间传递数据，数据将被传递到我的表单组件。 我使用buttonRenderer函数从ag网格中检索行的数据，但我现在不知道如何将其传递给我的第二个组件。 以下是我的两个界面： 这也是我的代码： Ag Grid.tsJavascript 在Ag网格中使用buttonRenderer传递数据,javascript,angular,typescript,ag-grid,Javascript,Angular,Typescript,Ag Grid,我试图通过点击ag网格中的单元格在两个不相关的组件之间传递数据，数据将被传递到我的表单组件。 我使用buttonRenderer函数从ag网格中检索行的数据，但我现在不知道如何将其传递给我的第二个组件。 以下是我的两个界面： 这也是我的代码： Ag Grid.ts import { Component, OnInit,Output, EventEmitter,Input } from '@angular/core'; import { HttpClient } from '@an
import { Component, OnInit,Output, EventEmitter,Input } 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 "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
import { RouterLinkRendererComponent } from '../router-link-renderer/router-link-renderer.component';
import {RouterModule, Routes, Router} from '@angular/router';
import { ButtonRendererComponent } from '../renderer/button-renderer/button-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: 'Button Col 1',
cellRenderer: 'buttonRenderer',
cellRendererParams: {
onClick: this.onBtnClick1.bind(this),
label: 'Deal details',
}
},
rowData : any;
frameworkComponents: any;
rowDataClicked1 = {};
rowDataClicked2 = {};
constructor(private service:DealsService) {
this.frameworkComponents = {
buttonRenderer : ButtonRendererComponent,
}
}
onGridReady(params) {
this.gridApi = params.api;
}
getDropDownlist(){
this.service.getDealsList().subscribe(data => this.rowData = data);
}
onBtnClick1(e) {
this.rowDataClicked1 = e.rowData;
}
ngOnInit() {
this.service.getDealsList().subscribe(data => {
this.rowData = data;
});
}
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
文件夹
我被阻止了，我真的很感谢你们的帮助。谢谢大家! 应用程序交易组件：
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
应用程序交易组件：
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>
<h4>Row data from button 1: </h4>
<pre style="float: right;">{{rowDataClicked1 | json}}</pre>
<!-- <button (click)="newMessage()" class="button">new message</button> -->
<ag-grid-angular ng-grid="gridOptions"
style=" min-width: 75%; max-width: 85%;
height: 1015px; margin-left: auto; margin-right: 40px; margin-top: 60px;"
class="ag-theme-alpine"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
[animateRows]="true"
[paginationPageSize]="10"
[pagination]="true"
[frameworkComponents]="frameworkComponents"
(selectedRows)= "makeCellClicked($event)"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';
//import { ICellRendererParams, IAfterGuiAttachedParams } from 'ag-grid-angular';
@Component({
selector: 'app-button-renderer',
template: `
<button type="button" (click)="onClick($event)">{{label}}</button>
`
})
export class ButtonRendererComponent implements ICellRendererAngularComp {
params;
label: string;
agInit(params): void {
this.params = params;
this.label = this.params.label || null;
}
refresh(params?: any): boolean {
return true;
}
onClick($event) {
if (this.params.onClick instanceof Function) {
// put anything into params u want pass into parents component
const params = {
event: $event,
rowData: this.params.node.data
// ...something
}
this.params.onClick(params);
}
}
}
import { Component, OnInit} from '@angular/core';
@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 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>
<app-repo [data]="rowDataClicked1"></app-repo>
<form [formGroup]="formData">
<div>
<input placeholder="Folder" formControlName="folder">
</div>
<div>
<input placeholder="Type" formControlName="type">
</div>
</form>