Angular中如何将*ngFor数据按特定布局分为两列展示

你需要把列表拆分为左右两列，让左列第N项与右列第N项在同一行对齐，下面提供两种可行方案：

方案1：提前拆分数据（直观易维护） #

先在组件逻辑里将原数组拆分为左右两组，再循环左组并匹配右组对应位置的元素：

组件TS代码 #

leftItems: any[] = [];
rightItems: any[] = [];

ngOnInit() {
  const mid = Math.ceil(this.items.length / 2);
  this.leftItems = this.items.slice(0, mid);
  this.rightItems = this.items.slice(mid);
}

HTML模板代码 #

<div class="w-full flex justify-center">
  <div class="grid grid-cols-2 gap-4 w-1/2">
    <div *ngFor="let item of leftItems; let i = index" class="flex items-center">
      <span>{{item.label}} - {{item.value}}</span>
      <span *ngIf="rightItems[i]" class="mx-2">|</span>
      <span *ngIf="rightItems[i]">{{rightItems[i].label}} - {{rightItems[i].value}}</span>
    </div>
  </div>
</div>

方案2：纯CSS Grid布局（无需修改数据） #

利用Grid的grid-row属性直接控制元素位置，无需拆分原数组：

HTML模板代码 #

<div class="w-full flex justify-center">
  <div class="grid grid-cols-2 gap-4 w-1/2">
    <div *ngFor="let item of items; let i = index" 
         class="flex"
         [style.grid-row]="i < items.length/2 ? i+1 : i - Math.floor(items.length/2) +1">
      <span>{{item.label}} - {{item.value}}</span>
    </div>
  </div>
</div>

逻辑说明 #

以6个元素为例：

• 前3个元素（索引0、1、2）的grid-row分别设为1、2、3，占据左列3行
• 后3个元素（索引3、4、5）的grid-row计算为3-3+1=1、4-3+1=2、5-3+1=3，对应右列第1、2、3行
• 若数组为奇数长度，最后一行仅显示左列元素，不会出现布局错乱

内容的提问来源于stack exchange，提问作者Victoria Erdődy