如何在Angular中使用*NgFor实现动态列卡片布局？

完全可以通过*ngFor实现该列卡片布局，这是处理大批量动态卡片场景的标准实现方式——相比手动逐个编写静态卡片结构，这种写法的代码量不会随卡片数量增长而增加，同时能保障长列表的渲染性能。

1. 定义动态数据源 #

在组件TypeScript文件中定义结构化的卡片数据集合，实际开发中可直接替换为接口返回的动态数据：

// app.component.ts
import { Component } from '@angular/core';

// 定义卡片数据结构，匹配现有卡片的内容字段
interface CardItem {
  title: string;
  paragraphList: string[];
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 模拟生成上百条动态卡片数据，实际场景可直接替换为接口返回的列表
  cardDataSource: CardItem[] = Array.from({ length: 120 }, (_, idx) => ({
    title: `Card ${idx + 1}`,
    paragraphList: ['Some text', 'Some text']
  }));

  // 为大批量列表添加trackBy，优化渲染性能，避免无意义的DOM重建
  trackCardById = (index: number, card: CardItem) => card.title;
}

2. 改造模板结构 #

保留你现有静态布局的外层row容器，把重复编写的column + card单元替换为*ngFor遍历逻辑：

<!-- app.component.html -->
<div class="row">
  <div 
    class="column" 
    *ngFor="let card of cardDataSource; trackBy: trackCardById"
  >
    <div class="card">
      <h3>{{ card.title }}</h3>
      <p *ngFor="let paragraph of card.paragraphList">{{ paragraph }}</p>
    </div>
  </div>
</div>

• 原有静态实现中定义的.row、.column、.card相关CSS样式可以完全保留，不需要配合模板逻辑做修改；只要.column设置了固定宽度（比如占容器宽度的33.33%），遍历生成的卡片会自动按宽度换行，实现和静态写法完全一致的多列排布效果。
• 无需额外把卡片拆成二维数组、嵌套两层循环来分列，单层遍历生成的卡片会配合CSS自动形成多列结构，代码维护成本更低；如果要调整每行展示的卡片数量，只需要修改.column的宽度（比如设置为25%即可实现每行4个卡片），无需改动模板逻辑。
• 针对上百个卡片的场景，必须添加trackBy逻辑，否则列表变更时会全量销毁、重建所有卡片DOM，造成明显的页面卡顿。

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