Angular中如何在HTML表格显示嵌套JSON对象的指定字段？

直接通过属性链式访问就能获取嵌套对象的指定字段，不需要使用json或keyvalue管道，这是最直接高效的方式：

核心解决代码 #

修正后的表格代码如下，直接访问嵌套对象的目标属性：

<h2>Lista Usuarios</h2>
<table class="table table-striped">
    <thead class="table-dark">
        <tr>
            <th>Cedula</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>clave</th>
            <th>email</th>
            <th>Empresa</th>
            <th>NIT</th>
            <th>Rol</th>
            <th>Estado</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let usuario of usuarios">
            <td>{{usuario.cedula}}</td>
            <td>{{usuario.primernombre}}</td>
            <td>{{usuario.primerapellido}}</td>
            <td>{{usuario.clave}}</td>
            <td>{{usuario.email}}</td>
            <!-- 直接访问企业名称和NIT字段 -->
            <td>{{usuario.nitempresa?.nombre}}</td>
            <td>{{usuario.nitempresa?.nit}}</td>
            <!-- 直接访问角色名称字段 -->
            <td>{{usuario.rol?.rol}}</td>
            <td>{{usuario.estado === 1 ? 'Activo' : 'Inactivo'}}</td>
        </tr>
    </tbody>
</table>

关键说明 #

• 属性链式访问：比如usuario.nitempresa.nombre直接指向嵌套对象里的nombre属性，就能显示企业名称，无需额外管道。
• 安全导航操作符?.：添加这个符号是为了避免当nitempresa或rol为null/undefined时触发报错（比如后端返回的用户数据中没有关联企业），Angular会自动处理空值情况，不会抛出异常。
• 状态字段优化：把数字类型的estado转成可读性更强的文本，提升用户体验。

进阶优化：定义TypeScript接口 #

为了让代码更规范、类型更安全，可以在组件中定义对应的TypeScript接口，明确数据结构：

// 企业接口
interface Empresa {
  nit: string;
  nombre: string;
  estado: number;
}

// 角色接口
interface Rol {
  id: number;
  rol: string;
  estado: number;
}

// 用户接口
interface Usuario {
  cedula: string;
  primernombre: string;
  segundonombre: string;
  primerapellido: string;
  segundoapellido: string;
  clave: string;
  email: string;
  nitempresa: Empresa;
  rol: Rol;
  estado: number;
}

// 在组件中声明usuarios数组的类型
usuarios: Usuario[] = [];

这样Angular的IDE会提供属性提示，减少拼写错误，同时让数据结构更清晰。

内容的提问来源于stack exchange，提问作者Kevresh