Question

我有一个简单的网格：

ChildColumn DropDown列表中的值取决于用户在父组件的DropDown列表中选择的选项。
例如：用户在父列中选择Option2。 List2将显示在ChildColumn中。

但是，为了显示List2，我刷新了ChildColumn。目前，我正在使用“刷新网格”按钮进行操作。但是，我希望每当用户在ParentColumn中选择一个新选项时，它就会自动发生。
我找不到办法。

这是grid.component.ts代码：

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);
  }
}

这是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自定义单元格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：

<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，负责从 ParentColumn自定义单元格渲染器将网格显示在 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中使用它呢？
谢谢！

Answer 1

我找到了解决这个问题的棘手方法。这不是一个完美的解决方案。您可以使用它，直到找到更好的:)
我所做的是创建一个名为refresh的布尔变量，每次用户更改parentColumn的dropDown列表中的选项时，该变量都将设置为true。
然后，当gridComponent检测到此变量已设置为true时。它刷新网格，然后将刷新重置为false。
我使用的（坏）技巧是：
每当用户选择该行时，都会启动刷新网格的方法。

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侦听器

  this.data.changeRefresh(false)

GridComponent.html：将其添加到网格定义

  (rowClicked)="testShit()"

GridComponent.ts 订阅服务：

ngOnInit() {
    this.data.currentRefresh.subscribe(receivedRefresh => (this.receivedRefreshfromCol1 = receivedRefresh));
  }

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

1 个答案: