Angular中如何根据section属性将数组元素分入顶部/底部div？

你的核心需求是把数组元素按section属性分成top和bottom两组，分别放在独立的div中并横向排列。先看看你原来代码的问题：你只在一个循环里筛选了top的元素，没有处理bottom组，而且外层用了span包裹，没法形成两个独立的div容器。

下面给你两种可行的解决方案，按需选择：

方案一：组件内预处理数据（推荐，性能更优） #

先在组件类里把数据分成两组，模板直接渲染分组后的数组，这样避免模板里重复过滤数据：

组件类代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 原始数据源
  items = [
    {name:"name1",section:"bottom"},
    {name:"name2",section:"top"},
    {name:"name3",section:"top"},
    {name:"name4",section:"bottom"},
    {name:"name5",section:"bottom"}
  ];

  // 过滤出top组元素
  get topItems() {
    return this.items.filter(item => item.section === 'top');
  }

  // 过滤出bottom组元素
  get bottomItems() {
    return this.items.filter(item => item.section === 'bottom');
  }
}

模板代码 #

<!-- Top区域：横向排列元素 -->
<div class="horizontal-group">
  <span *ngFor="let item of topItems">{{ item.name }} </span>
</div>

<!-- Bottom区域：横向排列元素 -->
<div class="horizontal-group">
  <span *ngFor="let item of bottomItems">{{ item.name }} </span>
</div>

CSS样式（实现横向排列） #

.horizontal-group {
  display: flex;
  gap: 10px; /* 控制元素间的间距 */
  margin: 10px 0;
}

方案二：模板内直接过滤（快速实现） #

如果不想改动组件逻辑，也可以在模板里用ng-container配合*ngIf过滤，不过这种方式在频繁变更检测时性能略差：

<div class="horizontal-group">
  <ng-container *ngFor="let item of items">
    <span *ngIf="item.section === 'top'">{{ item.name }} </span>
  </ng-container>
</div>

<div class="horizontal-group">
  <ng-container *ngFor="let item of items">
    <span *ngIf="item.section === 'bottom'">{{ item.name }} </span>
  </ng-container>
</div>

同样加上上面的CSS样式，就能实现你要的横向排列效果啦。

内容的提问来源于stack exchange，提问作者SA-