我试图有条理地将我的bootstrap col-xs-4的三个包装成一排 . 我的col-xs-4渲染很好,但是我无法弄清楚如何让它们连续地包裹起来 . 这是我的当前不是NgFor:
<div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'>
<ul class="list-unstyled">
<li class="heading">
<div class="clearfix">
<span [className]="linkGroup.ContainerCssClass">
<span [className]="linkGroup.CssClass"></span>
</span>
<a href="#">
<strong class="heading-text">{{linkGroup.Title}}</strong>
</a>
</div>
</li>
<li *ngFor='let link of linkGroup.Links'>
<a href="#" class="link">
<span [className]="link.CssClass"></span>
<span class="item">{{link.Title}}</span>
</a>
</li>
</ul>
</div>
我想做的是这样的,但我知道它是错的,所以正确的方法是什么:
<div *ngIf='i % 3== 0' class="row">
<div class="col-xs-4" *ngFor='let linkGroup of linkGroups | siteMapText: siteMapTextFilter; let i=index'>
<ul class="list-unstyled">
<li class="heading">
<div class="clearfix">
<span [className]="linkGroup.ContainerCssClass">
<span [className]="linkGroup.CssClass"></span>
</span>
<a href="#">
<strong class="heading-text">{{linkGroup.Title}}</strong>
</a>
</div>
</li>
<li *ngFor='let link of linkGroup.Links'>
<a href="#" class="link">
<span [className]="link.CssClass"></span>
<span class="item">{{link.Title}}</span>
</a>
</li>
</ul>
</div>
</div>
编辑
答案是在Gunter建议的情况下,重新组织要分组成行的数据 . 然后我可以将模板组织到这个:
<div class="row" *ngFor='let linkRow of linkRows| siteMapRowText: siteMapTextFilter'>
<div class="col-xs-4" *ngFor='let rowCol of linkRow.RowGroups'>
<ul class="list-unstyled">
<li class="heading">
<div class="clearfix">
<span [className]="rowCol.ContainerCssClass">
<span [className]="rowCol.CssClass"></span>
</span>
<a href="#">
<strong class="heading-text">{{rowCol.Title}}</strong>
</a>
</div>
</li>
<li *ngFor='let link of rowCol.Links'>
<a href="#" class="link">
<span [className]="link.CssClass"></span>
<span class="item">{{link.Title}}</span>
</a>
</li>
</ul>
</div>
</div>
1 回答
Update
您可以使用一个管道来创建一个新的数组,该数组将4个项目组合成一个数组,这样您就可以获得一个数组数组,然后使用嵌套的ngFor
另见How to split a long array into smaller arrays, with JavaScript
那就像使用它一样
original
这可以通过
ngTemplateOutlet
实现首先,我们创建一个可重用的组件:
let-linkGroup="linkGroup"
声明一个上下文变量linkGroup
,它引用传递的上下文的linGroup
属性 .然后我们在
ngFor
中使用模板,并在每第4个项目上使用<div class="row">
包装,否则打开包装 .<template ngFor let-linkGroup [ngForOf] =“linkGroups | siteMapText:siteMapTextFilter”let-i =“index”>
<template [ngIf] =“i%3 === 0”>
<div class =“row”> <template [ngTemplateOutlet] =“linkGroupTemplate”[ngOutletContext] =“{'linkGroup':linkGroup}”> </ DIV> <模板>
<template [ngIf] =“i%3!== 0”>
<template [ngTemplateOutlet] =“linkGroupTemplate”[ngOutletContext] =“{'linkGroup':linkGroup}”>
</模板>
</模板>
使用
[ngOutletContext]="{'linkGroup': linkGroup}"
,我们将实际的linkGroup
值包装在另一个对象中,以便我们可以像以前一样在模板中访问它 . 否则,我们需要为我们想要使用的每个属性声明一个变量并从所有绑定中删除
linkGroup.
.另请参阅How to repeat a piece of HTML multiple times without ngFor and without another @Component以获取使用
ngTemplateOutlet
和ngOutletContext
的示例(使用Plunker) .