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

Question

我们想放入一个ng-content内部,*ngFor然后指定ng-content使用包含ngFor的组件的内容.可能吗？

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

演示

Answer 1

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

要使这项工作,您可能需要一个ngFor重复传递给内容的自定义<ng-content>.

NgForsngForTemplate可能会对您的用例有所帮助.

另请参见Angular2子组件作为数据

Answer 2

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

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

子组件.html

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

子组件.ts

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

父组件.html

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