如何在Angular中以特定格式/布局显示数据？

Question

我有1000多种产品的数据。现在，我想在一行中显示3个产品，而在下一行中显示第4个产品。类似附件的图像。

我在这里：

<span *ngFor= "let result of results;let i=index;">
//Logic to display result in this format 
//  X X X
//  X X X
//  ..
</span>

Answer 1

您可以使用以下逻辑：

<div *ngFor="let result of results; let i = index">
  <div *ngIf="i % 3 == 0" class="row">
    {{ result }}
    <div *ngIf="i + 1 < results.length">{{ results[i + 1] }}</div>
    <div *ngIf="i + 2 < results.length">{{ results[i + 2] }}</div>
  </div>
</div