如何在Angular的*ngFor块中使用内容投影（Transclusion）？

你这个通用网格组件的设计思路很实用——通过动态传入数据数组，结合响应式布局和内容插槽，能适配各种业务场景的卡片展示需求！下面是整理后的代码和关键细节说明：

组件类代码（TypeScript） #

export class GridComponent { 
  @Input() items: any[]; 
}

模板代码（HTML） #

<div class="grid"> 
  <ul class="row"> 
    <li *ngFor="let item of items; let i = index;" class="col-lg-3 col-sm-4 col-xs-6 card-container"> 
      <ng-content></ng-content> 
    </li> 
  </ul> 
</div>

核心特性拆解 #

• 动态数据渲染：通过@Input()接收任意类型的items数组，用*ngFor循环生成列表项，完全适配不同业务的数据结构
• 响应式布局：借助Bootstrap风格的栅格类，在大屏、平板、小屏设备上分别展示4列、3列、2列的卡片布局，自动适配屏幕尺寸
• 自定义内容插槽：ng-content允许父组件传入个性化的卡片内容，让这个网格组件具备极高的通用性和灵活性

如果要进一步优化组件，还可以考虑这些方向：

• 给items添加泛型约束（比如@Input() items: T[]），提升类型安全性，避免任意类型带来的潜在问题
• 暴露可配置的输入属性，比如列数、卡片间距、是否显示索引等，增强组件的灵活性
• 添加空状态处理，当items为空时显示友好的空提示内容

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