Angular响应式动态卡片添加间隔箭头（排除最后一个）实现咨询

需求说明 #

已通过Angular的*ngFor生成响应式卡片，需实现：

• 除最后一张卡片外，每张卡片后方添加指定箭头图标
• 卡片保持横向不换行布局，同时保留原有响应式特性

当前代码：

<div class="col-4" style="width:25%" *ngFor="let element of myArray">
  <div class="card-body">
    </div>my card</div>
  </div>
</div>

myArray = [
  { "id": 1 },
  { "id": 2 },
  { "id": 3 },
  { "id": 4 }
]

解决方案 #

1. 修正结构并添加箭头控制逻辑 #

利用*ngFor的last局部变量判断是否为最后一项，结合Flex布局实现横向排列：

<!-- 外层容器：横向排列、不换行、溢出时显示滚动条 -->
<div class="d-flex flex-nowrap overflow-x-auto p-2">
  <!-- 卡片+箭头组合单元 -->
  <div class="flex-shrink-0 w-25 d-flex align-items-center" *ngFor="let element of myArray; let last = last">
    <!-- 卡片主体 -->
    <div class="card w-100">
      <div class="card-body">
        my card {{element.id}}
      </div>
    </div>
    <!-- 非最后一项显示箭头 -->
    <div *ngIf="!last" class="mx-3">
      <img src="https://i.sstatic.net/7z6sG.png" alt="间隔箭头" style="height: 2rem;">
    </div>
  </div>
</div>

2. 核心布局说明 #

• 横向不换行：d-flex flex-nowrap让容器内元素横向排列，overflow-x-auto保证空间不足时显示横向滚动条，适配小屏设备
• 响应式宽度：w-25设置卡片占容器宽度的25%（匹配4张卡片场景），flex-shrink-0禁止卡片收缩，维持布局一致性
• 箭头控制：*ngIf="!last"精准控制箭头仅在非最后一张卡片后显示，mx-3控制箭头与卡片的间距，align-items-center实现箭头与卡片垂直居中对齐

3. 移动端适配（可选） #

添加媒体查询，在小屏设备上调整卡片宽度和箭头尺寸：

@media (max-width: 768px) {
  .w-25 {
    width: 45% !important;
  }
  .mx-3 img {
    height: 1.5rem;
  }
}

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