如何在Angular中基于JSON数据创建动态视图实现动态水平线条布局

• 布局逻辑错配：循环渲染的单个节点容器内垂直堆叠了标题、hr、图标，在水平flex布局下，每个hr仅出现在对应竖块的局部，无法串联成贯穿所有图标的完整水平轴线
• 违反DOM规范：循环生成的多个hr绑定了同一个#timeline id，同id在页面多次出现不符合HTML标准
• 样式设置失准：默认块级的hr被强制设为inline-block，搭配10px粗的蓝色边框，完全偏离细水平分隔线的视觉要求
• 定位逻辑缺失：没有设置节点、连线的垂直居中对齐规则，导致元素排布错位

Component.html #

<div class="timeline-wrapper">
  <div class="timeline-track">
    <div 
      class="timeline-node" 
      *ngFor="let item of timelineObject; let isFirst = first; let isLast = last"
    >
      <h3 class="node-title">{{ item.data }}</h3>
      <!-- 动态生成的水平分隔线，仅在非首/末节点位置生成对应侧的连线 -->
      <div 
        class="node-line"
        [class.line-left]="!isFirst"
        [class.line-right]="!isLast"
      ></div>
      <img class="node-icon" [src]="item.icon" alt="时间节点图标">
    </div>
  </div>
</div>

Component.css #

/* 最外层居中容器 */
.timeline-wrapper {
  text-align: center;
  padding: 2rem 0;
}

/* 水平时间轴主轨道 */
.timeline-track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-around;
  width: 100%;
}

/* 单个时间节点单元 */
.timeline-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1; /* 每个节点均分轨道宽度，实现均匀排布 */
}

/* 节点顶部文本标题 */
.node-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
}

/* 连接节点的水平分隔线 */
.node-line {
  position: absolute;
  top: calc(1rem + 1.5rem); /* 对齐图标中心位置，可根据标题、图标实际尺寸微调 */
  height: 2px;
  background-color: #2563eb;
}

/* 非首个节点的左侧连线 */
.line-left {
  left: -50%;
  width: 100%;
}

/* 非末个节点的右侧连线 */
.line-right {
  right: -50%;
  width: 100%;
}

/* 节点图标 */
.node-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1; /* 保证图标压在分隔线上方，不被线条遮挡 */
}

• 所有分隔线会根据JSON返回的节点数量动态生成，相邻节点自动通过细蓝色线条串联
• 首个节点不会生成左侧出头连线，末个节点不会生成右侧出头连线，视觉更规整
• 可以通过调整top值、线条高度、图标尺寸，快速匹配目标参考图的视觉参数

内容的提问来源于stack exchange，提问作者K.Gie