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

Question

我在ngFor使用动态表格加载器angular 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选择器匹配的第一个子视图，因此它将仅在第一个子视图内创建组件。