angular - 将 ngFor 的每个元素都包装在新容器中?
问题描述
我目前拥有的是具有此模板的父组件:
<div class="fxcol full-height" [ngStyle]="style">
<ng-container *ngFor="let container of form.Containers; let i=index">
<ev-container class="ev-container " [container]="container" [parentForm]="parentForm" [params]="params"></ev-container>
</ng-container>
</div>
我想要实现的是每个用它包裹的 ev-container 都是这样的 div 元素的下一个兄弟姐妹:
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
<div class="fxcol full-height">
<ev-container class="ev-container"></ev-container>
</div>
</div>
</div>
此问题是否有任何已知的解决方法?
谢谢你!
解决方案
我没有检查,但这应该可以
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: 0, list: form.Containers }">
</ng-container>
<ng-template #tpl let-index="index" let-list="list">
<div *ngIf="list && list[index]" class="fxcol full-height" [ngStyle]="style">
<ev-container class="ev-container"
[container]="form.Containers[index]"
[parentForm]="parentForm"
[params]="params">
</ev-container>
<ng-container
[ngTemplateOutlet]="tpl"
[ngTemplateOutletContext]="{ index: index + 1, list: list }">
</ng-container>
</div>
</ng-template>
推荐阅读
- javascript - 无法根据正则表达式拆分字符串
- yocto - 在繁忙的构建节点上通过 NFS 托管 Yocto SSTATE_MIRROR - 一个坏主意?
- sas - 导出整个 SAS EG 会话的日志
- c# - 带有 WPF 数据网格视图和行详细信息的异步等待。应用程序在继续之前不等待任务的结果
- javascript - 如何允许函数访问循环中的所有变量并使用 javascript 执行它们?
- css - 如何将订单状态类添加到正文标签?
- c++ - 我可以从使用 Visual Studio 2017 构建的 C++ 程序中使用 Access Database Engine 2010 吗?
- c++ - 悬空指针(我认为)导致程序崩溃?
- python - Dlib 已安装但无法打开 - Mac M1
- python - 在 Numpy 中,如何获得与 arr 百分位数相同的值,但包括负数?