Angular 15动态列组件实现：API数据驱动多列自动扩展问题求助

问题分析 #

你的需求是实现一个固定高度450px的容器，内容高度未超过时单列显示，超过则自动扩展为多列。原代码存在以下核心问题：

• 仅处理第一个.order-item元素，循环生成的其他容器完全未被处理
• 错误将desiredHeight设为内容实际高度，而非目标固定高度450px
• 仅支持生成第二列，无法扩展到更多列
• 克隆元素后未移除原元素，导致内容重复展示
• 依赖setTimeout的时间延迟，逻辑不可靠，无法适配不同渲染速度场景

方案一：CSS 原生多列布局（推荐） #

这是最简洁高效的实现方式，无需复杂TS操作，直接通过CSS原生属性完成需求：

1. 修改SCSS样式 #

.order-item {
  height: 450px; /* 固定容器高度 */
  width: fit-content; /* 宽度随列数自适应 */
  column-width: 340px; /* 每列最小宽度 */
  column-gap: 20px; /* 列间距 */
  overflow: hidden; /* 超出高度的内容自动分栏 */
  column-rule: 2px solid #eeeeee52; /* 列分隔线 */
}

.order-item .content-block {
  break-inside: avoid; /* 避免单个内容块被拆分到两列 */
}

2. 简化HTML代码 #

不需要额外列容器，直接保留内容结构即可：

<div class="order-item" *ngFor="let item of order">
  <div class="first-div">
    <ng-container *ngFor="let data of item.items" class="content-block">
      <h3>{{data.itemNameoriginal}}</h3>
      <ul *ngIf="data.subCartItemArrayList.length">
        <li *ngFor="let subCartList of data.subCartItemArrayList">{{subCartList.itemNameoriginal}}</li>
      </ul>
    </ng-container>
  </div>
</div>

原理说明 #

• column-width定义每列的最小宽度，浏览器会自动根据容器高度和内容总量计算所需列数
• height:450px固定容器高度，当内容总高度超过阈值时，自动将溢出内容排列到下一列
• break-inside: avoid确保每个内容块不会被拆分到两列，保持内容完整性
• 整个布局由浏览器原生渲染引擎处理，性能优于JS操作，且天然支持响应式适配

方案二：Angular 逻辑控制（自定义场景） #

如果需要更精细的控制（比如自定义列样式、动态控制列数等），可以改进原TS逻辑：

1. 修改TS代码 #

import { Component, AfterViewChecked, QueryList, ViewChildren, ElementRef } from '@angular/core';
import { Subscription } from 'rxjs';
import { ApiServiceService } from 'src/app/shared/services/api-service/api-service.service';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewChecked {
  order: any[] = [];
  orderSubscription: Subscription;
  @ViewChildren('orderContainer') orderContainers!: QueryList<ElementRef>;
  private processed = false; // 标记是否已处理，避免重复执行

  constructor(private apiService: ApiServiceService) { }

  ngOnInit() {
    this.orderSubscription = this.apiService.getOrders().subscribe((res: any) => {
      this.order = res;
      this.processed = false; // 数据更新后重置标记
    });
  }

  ngAfterViewChecked(): void {
    // 数据加载完成且未处理过才执行逻辑
    if (this.order.length > 0 && !this.processed) {
      this.processAllContainers();
      this.processed = true;
    }
  }

  private processAllContainers() {
    const containerHeight = 450; // 固定容器高度
    const columnWidth = 340; // 每列宽度

    this.orderContainers.forEach(containerEl => {
      const container = containerEl.nativeElement;
      const firstColumn = container.querySelector('.first-div');
      const items = Array.from(firstColumn.children); // 获取所有内容项

      let currentColumn = firstColumn;
      let currentColumnHeight = 0;

      items.forEach(item => {
        const itemHeight = item.offsetHeight;
        // 当前列添加元素后超过高度，创建新列
        if (currentColumnHeight + itemHeight > containerHeight) {
          const newColumn = document.createElement('div');
          newColumn.classList.add('column');
          newColumn.style.width = `${columnWidth}px`;
          newColumn.style.marginLeft = '20px';
          newColumn.style.borderLeft = '2px solid #eeeeee52';
          container.appendChild(newColumn);
          currentColumn = newColumn;
          currentColumnHeight = 0;
        }
        currentColumn.appendChild(item);
        currentColumnHeight += itemHeight;
      });
    });
  }

  ngOnDestroy() {
    this.orderSubscription.unsubscribe();
  }
}

2. 修改HTML代码（添加模板引用） #

<div #orderContainer class="order-item" *ngFor="let item of order">
  <div class="first-div column">
    <ng-container *ngFor="let data of item.items">
      <h3>{{data.itemNameoriginal}}</h3>
      <ul *ngIf="data.subCartItemArrayList.length">
        <li *ngFor="let subCartList of data.subCartItemArrayList">{{subCartList.itemNameoriginal}}</li>
      </ul>
    </ng-container>
  </div>
</div>

3. 补充SCSS样式 #

.order-item {
  height: 450px;
  display: flex;
  overflow: hidden;
}

.column {
  width: 340px;
}

原理说明 #

• 使用@ViewChildren获取所有.order-item容器，确保每个容器都被处理
• 在ngAfterViewChecked中执行逻辑，确保数据渲染完成后再计算高度
• 遍历每个内容项，实时计算当前列高度，超过固定高度则创建新列并移动元素
• 使用processed标记避免重复执行逻辑，提升组件性能

内容的提问来源于stack exchange，提问作者Atikul Islam Atik