Angular 中 ngFor 如何避免 rowspan 重复渲染

✅ 正确解法：数据驱动视图，而非视图推导数据

Angular 的响应式渲染哲学强调：模板应是数据状态的忠实映射，而非通过复杂条件逻辑“修补”结构缺陷。因此，问题根源不在模板语法，而在数据建模方式。

原始数据将 partQty 和 rowspan 放在 refRaw（父级）上，却期望它只在首个 rafale 行生效——这违背了“单一数据源”原则，迫使模板承担状态协调职责（如“跳过后续渲染”），极易出错且不可维护。

✅ 推荐数据结构调整

将 partQty 和 rowspan 显式下移到每个 rafale 对象中，并仅在需要展示该值的 rafale 项中填充（其余留空或设为 null/undefined）：

tableMongoData = [
  {
    ref: '322416730R',
    type: 'RAW',
    rafale: [
      {
        name: '14x63',
        partQty: '1.467',  // ✅ 仅此处定义，表示该行承载主数量
        rowspan: 2,
        refs: [ /* ... */ ]
      },
      {
        name: '14x69',
        // ❌ 不再重复定义 partQty/rowspan，保持干净
        refs: [ /* ... */ ]
      }
    ]
  },
  // ...
];

✅ 对应模板优化（简洁、健壮、无副作用）

<tbody class="table-group-divider">
  <ng-container *ngFor="let refRaw of tableMongoData">
    <tr *ngFor="let rafale of refRaw.rafale; let i = index">
      <th class="text-center" scope="row">{{ rafale.name }}</th>
      <!-- ✅ 仅当 rafale 拥有 partQty 时才渲染 td，且正确应用 rowspan -->
      <td 
        *ngIf="rafale.partQty != null" 
        [attr.rowspan]="rafale.rowspan"
        class="text-center align-middle"
        tabindex="0"
        data-bs-toggle="tooltip"
        data-bs-title="Referência: "
      >
        {{ rafale.partQty }}
      </td>
    </tr>
  </ng-container>
</tbody>

? 关键点：*ngIf 在此处不是“补丁”，而是声明式语义表达——“此单元格仅存在于需承载跨行数据的特定行”。Angular 会自然跳过无 partQty 的 rafale 行，彻底避免重复渲染。

⚠️ 注意事项与最佳实践

• 避免在模板中使用 trackBy 或 index 手动控制渲染逻辑：trackBy 用于性能优化（减少 DOM 重用），不解决结构性重复问题；基于 index === 0 的 *ngIf 在数据动态变化时极易失效。
• 服务端/数据层统一处理 rowspan 分配：理想情况下，rowspan 值应在数据获取后、绑定前由组件或服务计算并注入到对应 rafale 项中，确保视图层零逻辑。
• CSS 辅助增强可读性（可选）：为跨行单元格添加 vertical-align: middle 和 border-collapse: separate 可提升视觉一致性：

  td[rowspan] {
    vertical-align: middle;
  }

✅ 总结

最终效果：表格严格按数据意图渲染，首行 partQty 仅出现一次并正确跨行，后续行自动留空，结构稳定、语义明确、扩展性强。

今天关于《Angular 中 ngFor 如何避免 rowspan 重复渲染》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！