Question

我在ngFor内使用角度为6的动态表单加载器

<div *ngFor="let field of item.fields" >
   <ng-template pf-host ></ng-template>
</div>

问题是ng-template仅在第一次创建。仅在第一个字段中有4个字段和ng-template。

loadComponents（）也有一个循环，例如我的HTML标记。并创建4次。

loadComponent() {
    this.item.fields.forEach(item => {
        const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        const viewContainerRef = this.pfHost.viewContainerRef;
        const componentRef = viewContainerRef.createComponent(componentFactory);
         });
}

如何正确制作？在第一项的第一部分中，在第二项的第二部分中，等等？现在，第一项中包含用于组件的信息。其他项目为空。

编辑：答案

使用@ViewChildren解决此问题

@ViewChildren(ProductFormDirective) pfHost: QueryList<ProductFormDirective>;

然后在loadComponents（）中按索引进行迭代。

        for (let i = 0; i < this.item.fields.length; i++) {
            const item = this.item.fields[i];
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
            const pfHostToArray = this.pfHost.toArray();
            const viewContainerRef = pfHostToArray[i].viewContainerRef;
            const componentRef = viewContainerRef.createComponent(componentFactory);
            console.log('component created');
            const inst = <ProductFormInnerComponent>componentRef.instance;
            (<ProductFormInnerComponent>componentRef.instance).metadata = item;
            item.componentRef = componentRef;
        }

Answer 1

我有点you不安，您在这里并未真正针对您的用例使用正确的方法……您想要实现什么，为什么？从功能上来说，我是说。

无论如何，您的组件中的for循环只会找到与pf-host选择器匹配的第一个子视图，因此它将仅在第一个选择器内创建组件。

ng-for中的ng-template仅创建1次

1 个答案: