如何在ag-grid中随ParentColumn选择自动刷新ChildColumn

嘿，你已经把跨组件通信的核心（BehaviorSubject服务）搭建好了，只需要在收到新选项时触发grid的刷新逻辑就行，下面是具体修改步骤：

步骤1：在AppComponent的订阅回调中触发刷新 #

打开grid.component.ts，修改ngOnInit里的订阅逻辑，在接收到ParentColumn的新选项后，直接调用refreshCol2()方法：

ngOnInit() {
  this.data.currentOption.subscribe(receivedOption => {
    this.receivedChosenOptionfromCol1 = receivedOption;
    // 确保gridApi已经初始化后再刷新，避免报错
    if (this.gridApi) {
      this.refreshCol2();
    }
  });
}

这样，每当ParentColumn选择变化，服务推送新的Child列表时，AppComponent就会自动触发ChildColumn的单元格刷新，不用手动点击按钮了。

（可选）优化ChildColumn的单元格渲染方式 #

你现在用字符串拼接的方式渲染ChildColumn的下拉框，这种方式维护性差，建议改成和ParentColumn一样的自定义组件方式：

1. 完善SecondCellRendererComponent，注入服务并订阅列表：

import { Component, OnInit } from '@angular/core';
import { ParentComChildDropValue } from '../parentComChildDropValue.service';

@Component({
  selector: 'app-second-cell-renderer',
  templateUrl: './second-cell-renderer.component.html',
  styleUrls: ['./second-cell-renderer.component.css']
})
export class SecondCellRendererComponent implements OnInit {
  params: any;
  childOptions: string[] = [];

  constructor(private data: ParentComChildDropValue) {}

  agInit(params: any): void {
    this.params = params;
  }

  ngOnInit() {
    this.data.currentOption.subscribe(options => {
      this.childOptions = options;
    });
  }
}

2. 编写second-cell-renderer.component.html模板：

<select class="form-control">
  <option *ngFor="let option of childOptions">{{ option }}</option>
</select>

3. 修改grid.component.ts中ChildColumn的配置：

{
  headerName: "ChildColumn",
  field: "chdCol",
  cellRenderer: 'childColCellRenderer' // 用框架组件代替字符串拼接
}

这种方式更符合Angular的响应式设计，当childOptions变化时，下拉框会自动更新，甚至不需要手动调用refreshCells。

额外小提示 #

• 你的ParentColumn渲染器html里有两个id="1"的option，建议移除第一个空option或者修正id，避免DOM元素id重复问题。
• 可以在refreshCol2()方法里加个日志，方便调试：console.log('Child column refreshed')

这样修改后，ParentColumn选择变化时，ChildColumn的下拉列表就会自动更新啦！

内容的提问来源于stack exchange，提问作者Ahmed Ghrib