ng-content可以在ngFor中使用吗？

Question

我们希望将ng-content放在*ngFor中，然后在使用包含ng-content的组件时指定ngFor的内容。有可能吗？

<li *ngFor="let data of dataSource">
  <ng-content></ng-content>
</li>

Demo

Answer 1

这是可能的，但可能不会产生预期的结果。父级传递的子级只能投影一次(无论有多少个<ng-content>。如果<ng-content>元素没有使用select属性选择传递的子元素的特定和不同部分，那么所有内容都将使用默认选择器(none)投影到第一个<ng-content>。

要做到这一点，您可能需要一个重复传递给<ng-content>的内容的自定义ngFor。

在您的用例中，NgFors ngForTemplate可能会有所帮助。

另请参阅Angular2 child component as data

Answer 2

是的，它不会给你适当的结果。但这可以通过ng-template和TemplateRef来实现。

我做了一个demo。您可以查看可能会有所帮助的演示。

child.component.html

<li *ngFor="let rowDetail of dataSource">
  <ng-container
     *ngIf="headerTemplateRef"
     [ngTemplateOutlet]="headerTemplateRef"
     [ngTemplateOutletContext]="{$implicit:rowDetail}"
  >
  </ng-container>
</li>

child.component.ts

@ContentChild('header',{static: false}) headerTemplateRef: TemplateRef<any>;

parent.component.html

<child-app [data]="data"> 
    <ng-template let-rowDetail #header>
        <div style="padding-left:35px;">
            <div>{{rowDetail.name}}</div>
        </div>
    </ng-template>
</child-app>