Angular 数组键值对垂直渲染技巧
来源：互联网 2026-07-18 08:27:10在Angular中，遍历displayedColumns数组为每个字段生成标签行与值行，实现数组元素按“字段名-字段值”垂直展示。该方案语义清晰、维护简单、适配窄屏，需注意字段存在性处理及国际化支持。
当你需要把嵌套数组里的每个对象，按照“字段名-字段值”这种两行结构垂直展示出来，而不是传统的表格行列布局——比如历史记录、日志详情这类场景——那么本文讲的就是怎么在 Angular 里实现它。
在 Angular 开发中，如果你遇到了一个对象数组（比如 ChangeLogEntryDto[]），并且希望为每个对象逐字段、垂直排列地展示键值对——也就是每一组“字段名”和“对应值”占据同一列的两行——而不是用标准的横向表格（一行一个对象、一列一个字段），那你就得动动模板逻辑了。
起初可能会想到用 长期稳定更新的攒劲资源： >>>点此立即查看<<< 其实思路很简单：对每个 总而言之，这个方案用简洁、可维护、语义明确的方式，精准满足了“每个数组元素按字段名/值垂直成对展示”的需求，算是 Angular 动态数据呈现的一个典型实践。 侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述 配合 Material 表格的列定义机制。但本质上，那还是“行驱动”的思路——每一行代表一个完整对象，每一列代表一个字段。结果就是所有字段并排显示，完全不符合“字段名在上、值在下”这种垂直阅读需求。
正确做法：放弃列声明，改用纯循环
entry，遍历 displayedColumns 数组，给每个字段名（key）生成一行，其中 显示字段标签， 显示对应的值。看代码：
{{ key | titlecase }}
{{ entry[key] || '-' }}
小提示：
| titlecase 是 Angular 内置管道，能把 registrarSurname 自动变成 “Registrar Surname”；而 || '-' 可以防止空值渲染成空白，读起来更清爽。这个方案有哪些好处？
displayedColumns 数组，字段顺序和业务逻辑完全一致。displayedColumns 就行，模板不用动。需要注意的地方
entry 对象里所有 displayedColumns 列出的 key 都存在——如果可能缺失，最好做兜底，比如 entry[key] 'N/A'。{{ 'FIELD.' + key | translate }}，而不是直接显示 key。mat-list + mat-list-item 实现更灵活的垂直布局。同类更新
更多
热游推荐
更多
下载
下载
下载
下载
下载
