如何在 Angular 中以键值对形式垂直渲染数组元素的属性

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

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

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

原方案使用 <table mat-table [dataSource]="[entry]"> 配合 Material 表格的列定义机制，本质仍是「行驱动」——每行代表一个完整对象，列代表字段。这导致所有字段并排显示，不符合“字段名在上、值在下”的垂直阅读需求。

✅ 正确做法是放弃 mat-table 的列声明式定义，改用纯结构化循环：对每个 entry，遍历 displayedColumns 数组，为每个字段名（key）生成一行，其中 <th> 显示字段标签，<td> 显示对应值。代码如下：

<div *ngFor="let entry of history">  <table class="key-value-table">    <tr *ngFor="let 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”；|| '-' 可防止空值渲染空白，提升可读性。

关键优势：

• ✅ 每个字段独立成行，语义清晰，尤其适合字段较多或移动端窄屏场景；
• ✅ 无需重复编写 <ng-container matColumnDef="...">，维护成本大幅降低；
• ✅ 完全复用已有 displayedColumns 数组，保证字段顺序与业务逻辑一致；
• ✅ 支持动态字段增删——只需修改 displayedColumns 即可生效。

⚠️ 注意事项：

• 确保 entry 对象中所有 displayedColumns 所列 key 均存在（或做好兜底处理，如 entry[key] ?? 'N/A'）；
• 若需支持国际化（i18n），建议将字段名映射为翻译键（如 {{ 'FIELD.' + key | translate }}），而非直接使用 key；
• 此结构不适用排序、分页等高级表格功能——如需交互能力，应评估是否仍需 Material 表格，或改用 mat-list + mat-list-item 实现更灵活的垂直布局。

综上，该方案以简洁、可维护、语义明确的方式，精准满足“每个数组元素按字段名/值垂直成对展示”的需求，是 Angular 动态数据呈现的典型实践。