在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

您可以創建兩個組件：一個顯示單張卡片，另一個顯示一排卡片。

整體代碼更多，但每個組件都更簡單，更具內聚性和可重用性;這兩個組件是分離的。

最後，您可以將所有卡片的數據作爲數據流處理，並形成所需數量的卡片以批量填充行。