本文介绍如何将嵌套数组中的每个对象按“字段名-字段值”两行结构垂直展示，替代传统表格行列布局，适用于历史记录、日志详情等需清晰呈现字段语义的场景。

本文介绍如何将嵌套数组中的每个对象按“字段名-字段值”两行结构垂直展示，替代传统表格行列布局，适用于历史记录、日志详情等需清晰呈现字段语义的场景。

在 Angular 应用中，当 history 是一个对象数组（如 ChangeLogEntryDto[]），而你希望为每个对象逐字段、垂直排列地展示其键值对（即每组「字段名」和「对应值」占据同一列的两行），而非标准的横向表格（一行一对象、一列一字段），就需要重构模板逻辑。

原方案使用

配合 Material 表格的列定义机制，本质仍是「行驱动」——每行代表一个完整对象，列代表字段。这导致所有字段并排显示，不符合“字段名在上、值在下”的垂直阅读需求。

✅ 正确做法是放弃 mat-table 的列声明式定义，改用纯结构化循环：对每个 entry，遍历 displayedColumns 数组，为每个字段名（key）生成一行，其中

显示字段标签，

显示对应值。代码如下： <div entry of history> <table class="key-value-table"><tr key of displayedcolumns> <th mat-header-cell>{{ key | titlecase }}</th> <td mat-cell>{{ entry[key] || '-' }}</td> </tr></table> <hr class="entry-separator"> </div> ? 提示：| titlecase 是 Angular 内置管道，自动将 registrarSurname 转为 “Registrar Surname”；|| '-' 可防止空值渲染空白，提升可读性。 MuseNet – OpenAI MuseNet是 OpenAI 发布的实验性 AI 音乐生成研究项目。 下载 关键优势： ✅ 每个字段独立成行，语义清晰，尤其适合字段较多或移动端窄屏场景； ✅ 无需重复编写 ，维护成本大幅降低； ✅ 完全复用已有 displayedColumns 数组，保证字段顺序与业务逻辑一致； ✅ 支持动态字段增删——只需修改 displayedColumns 即可生效。 ⚠️ 注意事项： 确保 entry 对象中所有 displayedColumns 所列 key 均存在（或做好兜底处理，如 entry[key] ?? 'N/A'）； 若需支持国际化（i18n），建议将字段名映射为翻译键（如 {{ 'FIELD.' + key | translate }}），而非直接使用 key； 此结构不适用排序、分页等高级表格功能——如需交互能力，应评估是否仍需 Material 表格，或改用 mat-list + mat-list-item 实现更灵活的垂直布局。 综上，该方案以简洁、可维护、语义明确的方式，精准满足“每个数组元素按字段名/值垂直成对展示”的需求，是 Angular 动态数据呈现的典型实践。