迭代 ng-content 项目并将每个项目包装在它自己的嵌套 div 中

Question

我读过这还不支持，但我想知道是否有人已经找到了解决这个问题的hacky解决方法。

我目前拥有的是具有此模板的父组件：

<dxi-item location='after' class="osii-item-content">
    <span><ng-content select="[osii-page-button]"></ng-content></span>
</dxi-item>

正在创建以下内容：

<dxi-item location='after' class="osii-item-content">
    <button> // first button returned by ng-content </button>
    <button> // second button returned by ng-content </button>
    <button> // third button returned by ng-content </button>
</dxi-item>

但我希望它做的是净以下 html：

<dxi-item location='after' class="osii-item-content">
    <button> // first button returned by ng-content </button>
</dxi-item> 

<dxi-item location='after' class="osii-item-content">
    <button> // second button returned by ng-content </button>
</dxi-item>

<dxi-item location='after' class="osii-item-content">
    <button> // third button returned by ng-content </button>
</dxi-item>

是否有针对此问题的已知解决方法？

谢谢！

Answer 1

我猜你正在寻找的是这样的： <ng-container *ngFor="let item of items"> <your-compo></your-compo> </ng-container> 所以你迭代这些项目并生成所需的组件。别担心，ng-container 不会被渲染，只有你的组件会被渲染。