在Angular2中使用ngFor，我該如何做一個“內部” 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>

或更簡單地說，我想做到這一點：

有沒有辦法在col-md-3 div中執行“內部” ngFor，在渲染4個聯系人之后停止？

Answer 1

您可以創建兩個組件：一個顯示一張卡片，第二個顯示一行卡片。

總體而言，代碼更多，但是每個組件都更簡單，更具凝聚力和可重用性； 這兩個組件是分離的。

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