如何基于另一个列A中发生的更改刷新Ag-grid中的列B [英] How to refresh a column B in ag-grid based on a change that occured in another column A
问题描述
我有一个简单的网格：
I have this simple grid:
ChildColumn DropDown列表中的值取决于用户在父组件的下拉列表中选择的选项。
例如：用户在父列中选择Option2。 List2将显示在ChildColumn中。
但是，为了显示List2，我刷新了ChildColumn。目前，我正在使用刷新网格按钮进行操作。但是，我希望它在用户在ParentColumn中选择新选项时自动发生。
我找不到解决方法。
The values in ChildColumn DropDown list depend on which option the user chose in the DropDown list in parent component.
For example: User chooses Option2 in parent column. List2 will get displayed in ChildColumn.
However, in order for the List2 to get displayed I have refresh the ChildColumn. For now, I am doing it with the "Refresh grid" button. However, I want it to happen automatically whenever the user chooses a new option in the ParentColumn.
I couldn't find a way to do this.
这是grid.component.ts代码：
Here's the grid.component.ts code:
import {Component, OnInit} from '@angular/core';
import { FirstCellRendererComponent } from './first-cell-renderer/first-cell-renderer.component';
import { SecondCellRendererComponent } from './second-cell-renderer/second-cell-renderer.component';
import {ParentComChildDropValue} from './parentComChildDropValue.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
constructor(private data: ParentComChildDropValue
) { }
columnDefs = [
{
headerName: "ParentColumn",
field: "prtCol",
cellRenderer:'parentColCellRenderer'
},
{
headerName: "ChildColumn",
field: "chdCol",
cellRenderer: (params) => {
return(
` <select class="form-control">
<br>`
+`<option>` +
this.receivedChosenOptionfromCol1[0]
+`</option>`
+`<option>` +
this.receivedChosenOptionfromCol1[1]
+`</option>` +
`<option>` +
this.receivedChosenOptionfromCol1[2]
+`</option>` +
`<option>` +
this.receivedChosenOptionfromCol1[3]
+`</option>` +
`</select>
`)
}
}
];
rowData = [{}];
frameworkComponents = {
parentColCellRenderer: FirstCellRendererComponent,
childColCellRenderer: SecondCellRendererComponent,
};
receivedChosenOptionfromCol1:string[];
ngOnInit() {
this.data.currentOption.subscribe(receivedOption => (this.receivedChosenOptionfromCol1 = receivedOption));
}
/**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */
private gridApi;
onGridReady(params) {
this.gridApi = params.api;
params.api.sizeColumnsToFit();
}
public refreshCol2() {
const params = { force: true, columns: ["chdCol"] };
this.gridApi.refreshCells(params);
}
}
这是网格。 component.html：
Here's the grid.component.html:
<button (click)="refreshCol2()">Refresh grid</button>
<ag-grid-angular
style="width: 500px; height: 500px;"
class="ag-theme-balham"
[enableSorting]="true"
[enableFilter]="true"
[pagination]="true"
[rowData]="rowData"
[columnDefs]="columnDefs"
[frameworkComponents]="frameworkComponents"
(gridReady)="onGridReady($event)"
>
</ag-grid-angular>
这是ParentColumn自定义单元格渲染器。ts：
This is the ParentColumn Custom cell renderer.ts:
import { Component, OnInit } from '@angular/core';
import {ParentComChildDropValue} from '../parentComChildDropValue.service'
@Component({
selector: 'app-first-cell-renderer',
templateUrl: './first-cell-renderer.component.html',
styleUrls: ['./first-cell-renderer.component.css']
})
export class FirstCellRendererComponent{
/**PS THE FOLLOWING CODE IS CRUCIAL FOR THE CELL RENDERER TO WORK */
params: any;
agInit(params: any): void {
this.params = params;
}
/**!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
/**COMMUNICATION BETWEEN CELL RENDERERS CODE */
constructor(private data: ParentComChildDropValue) { }
/**§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§§ */
colTwoList:string[]=[]
public populateListInColTwo(chosenOption){
// I added the following line because without it the colTwoList gets all the accumulated chosen lists
this.colTwoList=[]
console.log('HERE THE CHOSEN OPTION' + chosenOption.value)
if (chosenOption.value==="ParentList_Option1"){
this.colTwoList.push('List1_Option1')
this.colTwoList.push('List1_Option2')
this.colTwoList.push('List1_Option3')
this.colTwoList.push('List1_Option4')
console.log('List One was populated')
}
else if (chosenOption.value==="ParentList_Option2"){
this.colTwoList.push('List2_Option1')
this.colTwoList.push('List2_Option2')
this.colTwoList.push('List2_Option3')
this.colTwoList.push('List2_Option4')
console.log('List Two was populated')
}
else if (chosenOption.value==="ParentList_Option3"){
this.colTwoList.push('List3_Option1')
this.colTwoList.push('List3_Option2')
this.colTwoList.push('List3_Option3')
this.colTwoList.push('List3_Option4')
console.log('List Three was populated')
}
else if (chosenOption.value==="ParentList_Option4"){
this.colTwoList.push('List4_Option1')
this.colTwoList.push('List4_Option2')
this.colTwoList.push('List4_Option3')
this.colTwoList.push('List4_Option4')
console.log('List Four was populated')
}
this.data.changeList(this.colTwoList)
}
}
这是ParentColumn自定义单元格渲染器html：
This is the ParentColumn custom cell renderer html:
<select class="form-control" (change)="populateListInColTwo($event.target)">
<br>
<option id="1"></option>
<option id="1">ParentList_Option1</option>
<option id="2">ParentList_Option2</option>
<option id="3">ParentList_Option3</option>
<option id="4">ParentList_Option4</option>
</select>
这是service.ts，负责从$ b发送数据$ b ParentColumn自定义单元格渲染器将网格显示在
childColumn中：
This is service.ts responsible of sending the data from the ParentColumn custom cell renderer to the grid to be displayed in childColumn:
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ParentComChildDropValue {
private optionSource = new BehaviorSubject<string[]>([]);
currentOption = this.optionSource.asObservable();
constructor() {}
changeList(receivedOption: string[]) {
this.optionSource.next(receivedOption)
console.log('changeOption works and this is the string list in the service '+receivedOption)
}
}
我真的不能每当用户在ParentColumn中选择一个选项时，都找不到一种方法来刷新ChildColumn中的列表。
我已经有一个事件，只要用户在ParentColumn中选择一个选项，就会触发该事件。但是，如何在ChildColumn中使用它呢？
谢谢！
I really couldn't find a way to make refresh the list in ChildColumn whenever the user chooses an option in ParentColumn.
I already have an event that gets fired whenever the user chooses an option in ParentColumn. But, how can I make use of it in ChildColumn?
Thank you!
推荐答案
我找到了解决这个问题的棘手方法。这不是一个完美的解决方案。您可以使用它，直到找到更好的方法为止：)
我所做的是创建一个名为refresh的布尔变量，该变量将在用户每次更改parentColumn的dropDown列表中的选项时设置为true。 br>
然后，当gridComponent检测到此变量已设置为true时。它刷新网格，然后将刷新重置为false。
我使用的（错误）技巧是：
每当用户选择该行时，都会启动刷新网格的方法。 。
I found a tricky way to get around this. It's not a perfect solution. You can use it until we found a better one :)
What I did is create a boolean variable called refresh that would be set to true everytime the user changes the option in the dropDown list in the parentColumn.
Then, when the gridComponent detects that this variable has been set to true. It refreshs the grid and then resets refresh to false.
The (bad)trick I used is:
The method that would refresh the grid will be launched everytime the user selects that row.
service.ts
service.ts
/** TESTING GRID_REFRESH USING A BOOLEAN REFRESH VARIABLE */
private refreshSource = new BehaviorSubject<boolean>(false);
currentRefresh = this.refreshSource.asObservable();
changeRefresh(receivedRefresh: boolean) {
this.refreshSource.next(receivedRefresh)
console.log('changeOption works and this is the refresh value in the service '+receivedRefresh)
}
/** TESTING GRID_REFRESH USING A BOOLEAN REFRESH VARIABLE */
parentColComponent.ts：将此方法添加到dropDown侦听器
parentColComponent.ts: Add this method to the dropDown listener
this.data.changeRefresh(false)
GridComponent.html：将其添加到网格中定义
GridComponent.html: add this to the grid definition
(rowClicked)="testShit()"
GridComponent.ts
订阅服务：
GridComponent.ts Subscribe to the service:
ngOnInit() {
this.data.currentRefresh.subscribe(receivedRefresh => (this.receivedRefreshfromCol1 = receivedRefresh));
}
GridComponent.ts中的刷新方法：
Refresh method in GridComponent.ts:
public testShit() {
if (this.receivedRefreshfromCol1===true){
const params = { force: true, columns: ["chdCol"] };
this.gridApi.refreshCells(params);
}
this.data.changeRefresh(false)
}
希望这会有所帮助：）
这篇关于如何基于另一个列A中发生的更改刷新Ag-grid中的列B的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
