Angular AG Grid：通过ComponentFactoryResolver在组件中加载网格时未触发gridReady事件

在我的Angular 10应用程序中，我正在通过组件工厂解析器加载一个包含AG网格的组件

当我通过一个按钮触发工厂解析器时，一切正常。显示网格，并正确触发

gridReady

事件

但是，如果我通过

ngOnInit（）

或

ngAfterViewInit（）

等触发组件工厂解析器，则不会触发gridReady事件，也不会显示网格

我试图使用ChangeDetectorRef服务强制进行更改检测，但这并没有改变任何事情

这是组件工厂解析程序的代码：

export class PlannerComponent implements OnInit {
  @ViewChild('ordersContainer', {read: ViewContainerRef}) container: ViewContainerRef;
  public orders = [];

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private httpClient: HttpClient
  ) { }

  ngOnInit(): void {
    this.loadOpenOrders();
  }

  loadOpenOrders() {
    this.httpClient.get('/orders')
      .pipe(map((result: any) => {
        const orders = result._embedded.orders;
        orders.forEach((function (order) {
          this.addOrder();
        }).bind(this))
      }))
      .subscribe()
  }

  onGridReady(params) {
    this.gridApi       = params.api;
    this.gridColumnApi = params.columnApi;
    this.gridApi.sizeColumnsToFit();
  }

  addOrder() {
    // Create component dynamically inside the ng-template
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(OrderComponent);
    const newOrder         = this.container.createComponent(componentFactory);

    // Push the component so that we can keep track of which components are created
    this.orders.push(newOrder);
  }
}

在视图中，组件的加载方式如下所示：

<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="card card-custom gutter-b">
        <ag-grid-angular
          style="width: 100%; height: 600px;"
          class="ag-theme-alpine"
          [rowData]="ordersToPlan"
          [columnDefs]="columnDefs"
          [rowSelection]="rowSelectionType"
          (gridReady)="onGridReady($event)"   <==== Only triggered through button click, but not on ngOnInit()
          [animateRows]="true"
        >
        </ag-grid-angular>
      </div>
    </div>
    <div class="col-6">
      <button class="btn btn-success mb-5" (click)="addOrder()">Add a new Order</button>
      <div>
        <ng-template #ordersContainer>
        </ng-template>
      </div>
    </div>
  </div>
</div>

我在代码中的某个地方看到了问题

与其在
pipe
操作符中调用
addOrders
，不如在
get
调用的
subscribe
部分执行

  loadOpenOrders() {
    this.httpClient.get('/orders')
      .subscribe((result: any) => {
        const orders = result._embedded.orders;
        orders.forEach(order => {
          this.addOrder();
        });
      });
  }

为什么我认为这会有帮助也许变化检测周期可能与rxjs的
订阅
可观察的
有关；而且，由于您的代码在订阅之前/之外执行所有这些工作，因此可能会被周期错过

因为我无法将这些代码作为注释，所以将其作为答案发布。让我知道这是否有效。评论你得到的任何错误/观察到的错误。如果您能提供任何工作示例（plunk/stackblitz），我们将能够快速为您提供帮助

如果没有帮助，将删除此答案。
尝试以下操作：

皈依

public orders = [];

变成可观察的：

private ordersBS = new BehaviourSubject<any[]>([]);
public orders$ = this.ordersBS.asObservable();

添加订单时：

this.ordersBS.next(newOrder);

这样，agGrid将始终听取$observable命令

onGridReady函数应该只调用一次。
我终于找到了问题所在。我需要强制执行更改检测，但在子组件中（通过组件工厂解析器加载的组件）

在顺序.component.ts中
：

constructor(
    private cd: ChangeDetectorRef
  ) { }

...

setTransport(transport: Transport): void {
    ...
    this.cd.detectChanges();
  }

非常感谢所有试图解决这个问题的人

constructor(
    private cd: ChangeDetectorRef
  ) { }

...

setTransport(transport: Transport): void {
    ...
    this.cd.detectChanges();
  }