在Angular2中使用ngFor，我该如何做一个“inner”ngFor？

Question

问题可能很难理解，但我的问题很简单：

• 我想显示的联系人列表。
• 我使用的引导显示它们为卡
• 我想每行显示4张牌

HTML结构：

<div class="row" *ngFor="let contact of contacts"> 
    <!-- Here I want to loop 4 of the contacts before rendering a new row --> 
    <div class="col-md-3"> 
     <contact-card [contact]="contact"></contact-card> 
    </div> 
    </div> 

或者更简单的，我想这样做实现这一目标：

有没有办法做一个“内部”ngFor在col-md-3 div，它会在渲染4个联系人后停止？

Answer 1

您可以创建两个组件：一个显示单张卡片，另一个显示一排卡片。

整体代码更多，但每个组件都更简单，更具内聚性和可重用性;这两个组件是分离的。

最后，您可以将所有卡片的数据作为数据流处理，并形成所需数量的卡片以批量填充行。