在表内容中渲染动态组件，重新渲染不显示组件

问题描述

我有一个已创建的自定义表格组件，它将动态组件呈现为单元格内容。问题似乎是，当数据源发生更改并且表重新呈现时，无法正确地重新渲染单元格，而是创建了组件（如日志语句所示），但似乎未添加该组件。表格单元格。

在我的表格组件中：

/**
 * this corresponds to a span that has some row/column data on it
 * that I can use in my code to properly get the right row/column
 * data and acts as the container for the created component
 */
@ViewChildren('cellContent',{ read: ViewContainerRef })
private _cellContent: QueryList<ViewContainerRef>;

ngOnInit() {
    this.dataSource$.pipe(
    ).subscribe(dataSource => {
        this.matTableDataSource = new MatTableDataSource(dataSource);

        // this is a hack for Now until I get it working properly
        this.ngAfterViewInit(); 

        this._changeDetectorRef.detectChanges();
    });

    this.displayedColumns = this.getdisplayColumns(this.columnDeFinition);
}

ngAfterViewInit() {
    // because of the hack mentioned above,just check if _cellContent exists yet
    if (!this._cellContent) {
        return;
    }

    this._cellContent.forEach(container=> {
        container.clear();

        //get some data from the ViewContainerRef
        const cIdx = +container.element?.nativeElement?.dataset?.colindex;

        // the column deFinition tells us about the component to render
        const colDef: TableColumnDeFinition = this.columnDeFinition?.[cIdx];

        const rIdx = +container.element?.nativeElement?.dataset?.rowindex;

        // the row is the data from the data source
        const row = this.matTableDataSource?.data?.[rIdx] ?? {};

        // create the component factory
        const cFactory = this._cFactoryResolver.resolveComponentFactory<typeof colDef.component.type>(colDef.component.type);

        let componentRef;

        // this was a hack just to see if it happneed to be some sort of race
        // condition which it is not that I can tell
        setTimeout(() => {
            container.createComponent<typeof colDef.component.type>(cFactory);
        },1000);

    });
}

所有这些都在第一个渲染上起作用，如您在下图中看到的那样，我得到了预期的复选框。您还可以在表格下方看到一个复选框。这是我试图查看我想做的事情是否可以在表外运行，以测试是否是与表的交互不起作用。它们都使用与源相同的数据集，因此您可以看到它们都被选中（因为源中有一条数据）。

但是，当我取消选中表中的复选框并单击“保存”按钮时，存储中的数据（使用ngrx）将更新，并且表的数据源也会更新。在更新后重新渲染时：

您可以在此处看到表中的复选框消失了（尽管如果我记录了所有步骤，它们都将被执行并且实例化了该组件），显然它并没有添加回表中。但是您可以在表格下方的复选框中看到它确实确实起作用了，您看到其中两个的原因是我没有清除要再次添加该复选框的容器，但是，它确实出现了并且确实具有尚未开始选择的事实证明了正确的数据。

因此，这显然与表有关，这就是为什么我添加超时的原因，以为这可能是表呈现方式的竞争条件。但是设置该超时也不起作用，我有点茫然。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）