angular - 在 NgFor 中添加动态组件

Question

我想创建一个接受另一个参数的组件，并生成该组件实例的集合。

(最终的目标是创建一个通用的后台)。

例如，类似的东西:

<common-collection [component]="collectionDisplayComponent" [items]="items"></common-collection>

我会得到这个(这里的组件是一个用于测试目的的加载器):

所以我已经有了一些工作(几乎):这里是组件的代码:

@Component({
  selector: 'common-collection',
  templateUrl: 'collection.component.html',
  styleUrls:  ['collection.component.css'],
  providers: [  ]

})
export class CollectionComponent implements AfterViewInit{

    constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

    @Input()
    set items(items: Array<object>){
      this._items = items;
      this.refresh();
    }

    private _items: Array<object> = [];screen
    @ViewChildren('componentRef', {read: ViewContainerRef}) public widgetTargets: QueryList<ViewContainerRef>

    public refresh() {
      let component = LoaderComponent; // Should be given in parameter, set manually for now

      if(typeof(this.widgetTargets) !== "undefined"){

        for (let i = 0; i < this.widgetTargets.toArray().length; i++) {
            let target = this.widgetTargets.toArray()[i];
            let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component);
            let cmpRef: any = target.createComponent(widgetComponent);


        }
      }
    }

    ngAfterViewInit(): void {
      this.widgetTargets.changes.subscribe(() => {
        this.refresh()
      });
    }
}

和关联的模板代码:

<div id="div-container">
    <div fxLayout="row" fxLayoutWrap fxLayoutGap="1%" fxFlexAlign="center center">
        <div class="div-item-card" fxFlex="24"  *ngFor="let item of _items;">
            <div #componentRef></div>
        </div>
    </div>
</div>

这段代码有效，但问题是我在错误的时间设置了 viewChildren，因为我有这个错误:

我认为我应该填充 widgetTargets 变量并对它执行 ngFor 而不是 _items，但我没有找到任何直接在其中添加组件的示例。

所有示例都包含创建“void”dom 元素，然后使用组件工厂设置它们(我在那里做并导致错误)。

非常感谢您的帮助。

编辑:“items”变量在组件初始化之后设置:它是从对父组件中的数据库的异步调用加载的。

编辑2在刷新方法中使用类似的东西。

for (let i = 0; i < this.widgetTargets.toArray().length; i++) {
            let target = this.widgetTargets.toArray()[i];
            let widgetComponent = this.componentFactoryResolver.resolveComponentFactory(component);
            target.clear();
            let cmpRef: any = target.createComponent(widgetComponent);
            cmpRef.instance.value = this._items[i]["value"];
            this.cd.detectChanges();
        }

Answer 1

试试这个:

constructor(private cd: ChangeDetectorRef) {
}

ngAfterViewInit() {
   ......
    this.cd.detectChanges();
}