Angular 可以在ngFor内部使用ng内容吗？

我们希望将

ng content

放入

*ngFor

中，然后在使用包含ngFor的组件时指定

ng content

的内容。可能吗

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

---

这是可能的，但可能不会产生预期的结果。父级传递的子级只能投射一次（无论有多少个

）。如果

元素没有使用

select

属性选择传递的子级的特定部分和不同部分，则所有内容都会使用默认选择器（无）投射到第一个

要实现这一点，您可能需要一个自定义的

ngFor

，它重复传递给

的内容

在您的用例中可能会有所帮助

---

另请参见

是的，它不会给出正确的结果。但这可以通过

ng template

和

TemplateRef

实现

我已经做了一个演示。你可以看到演示，这可能会有所帮助

child.component.html

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

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

child.component.ts

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

@ContentChild（'header'，{static:false}）headerTemplateRef:TemplateRef；

parent.component.html

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

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

{{rowDetail.name}

也有同样的问题。Angular 4有什么解决方案吗？你能分享一个应该如何实现的小例子吗？寻找

ngTemplateOutlet

或

ngForTemplate

。这里有几个答案。非常有帮助（--）非常感谢你，这正是我正在寻找的解决方案，你介意解释一下这一切是如何工作的吗？