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

【问题标题】：Can an ng-content be used inside of an ngFor?可以在 ngFor 中使用 ng-content 吗？
【发布时间】：2017-08-04 16:08:50
【问题描述】：

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

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

Demo

【问题讨论】：

有同样的问题。 Angular 4 的任何解决方案？

标签： angular

【解决方案1】：

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

要完成这项工作，您可能需要一个自定义的ngFor，它重复传递给<ng-content> 的内容。

NgFors ngForTemplate 可能对您的用例有所帮助。

另见Angular2 child component as data

【讨论】：

你能分享一个应该如何实现的小例子吗？
寻找ngTemplateOutlet 或ngForTemplate。有几个答案。
真的很有帮助（-_-）

【解决方案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>

【讨论】：

非常感谢，这正是我正在寻找的解决方案，您介意解释一下这一切是如何工作的吗？
非常感谢，这是迄今为止我见过的最好的解决方案。如果父母没有提供任何内容，我想提供默认模板。
谢谢！它的作品非常好！