Angular 数组键值对垂直渲染技巧

作者：技术拾光

时间：2026-07-18

在Angular中，遍历displayedColumns数组为每个字段生成标签行与值行，实现数组元素按“字段名-字段值”垂直展示。该方案语义清晰、维护简单、适配窄屏，需注意字段存在性处理及国际化支持。

当你需要把嵌套数组里的每个对象，按照“字段名-字段值”这种两行结构垂直展示出来，而不是传统的表格行列布局——比如历史记录、日志详情这类场景——那么本文讲的就是怎么在 Angular 里实现它。

在 Angular 开发中，如果你遇到了一个对象数组（比如 ChangeLogEntryDto[]），并且希望为每个对象逐字段、垂直排列地展示键值对——也就是每一组“字段名”和“对应值”占据同一列的两行——而不是用标准的横向表格（一行一个对象、一列一个字段），那你就得动动模板逻辑了。

起初可能会想到用

配合 Material 表格的列定义机制。但本质上，那还是“行驱动”的思路——每一行代表一个完整对象，每一列代表一个字段。结果就是所有字段并排显示，完全不符合“字段名在上、值在下”这种垂直阅读需求。

正确做法：放弃列声明，改用纯循环

其实思路很简单：对每个 entry，遍历 displayedColumns 数组，给每个字段名（key）生成一行，其中

显示字段标签，

显示对应的值。看代码：


  
    
      {{ key | titlecase }}
      {{ entry[key] || '-' }}

小提示：| titlecase 是 Angular 内置管道，能把 registrarSurname 自动变成 “Registrar Surname”；而 || '-' 可以防止空值渲染成空白，读起来更清爽。

确保 entry 对象里所有 displayedColumns 列出的 key 都存在——如果可能缺失，最好做兜底，比如 entry[key] 'N/A'。
如果要做国际化（i18n），建议把字段名映射成翻译键，比如 {{ 'FIELD.' + key | translate }}，而不是直接显示 key。
这个结构不支持排序、分页等高级表格功能。如果需要交互，得评估一下是否还要用 Material 表格，或者干脆改用 mat-list + mat-list-item 实现更灵活的垂直布局。

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

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

选择画质和输出格式，预览压缩前后的大小。