如何根据另一列 A 中发生的更改刷新 ag-grid 中的列 B

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 自定义单元格渲染器到要显示的网格 子列：

    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 下拉列表中的选项时，该变量都会设置为 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：将此方法添加到下拉监听器

  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)

}

希望这会有所帮助:)