Angular 5中如何展示JSON映射器中的嵌套对象数据？

嘿，刚入门Angular 5和TypeScript对吧？别慌，你遇到的这个问题其实超常见——因为serveurs是一个数组，而不是单个对象，直接用{{app.serveurs}}的话，Angular只能把它转换成字符串显示，也就是你看到的[Object object]。下面给你几种实用的解决方法：

方法一：用*ngFor遍历数组（推荐） #

既然serveurs是数组，那就用Angular的*ngFor指令循环遍历每一个服务器对象，这样就能逐个访问它们的字段了。比如在你的模板里这么写：

<!-- 先确保app存在，避免空值报错 -->
<div *ngIf="app">
  <p>应用类型: {{app.type}}</p>
  <p>应用名称: {{app.nom}}</p>

  <h3>服务器列表</h3>
  <!-- 遍历serveurs数组，每个元素赋值给serveur变量 -->
  <div *ngFor="let serveur of app.serveurs" style="margin-bottom: 1rem; padding: 0.5rem; border: 1px solid #eee;">
    <p>服务器ID: {{serveur.id}}</p>
    <p>服务器名称: {{serveur.nom}}</p>
    <p>IP地址: {{serveur.ip}}</p>

    <h4>服务器指标</h4>
    <!-- 嵌套访问indicateurs里的字段 -->
    <p>构建日期: {{serveur.indicateurs.BUILDDATE}}</p>
    <p>状态: {{serveur.indicateurs.STATUS}}</p>
    <p>版本: {{serveur.indicateurs.VERSION}}</p>
  </div>
</div>

这种方法最灵活，不管数组里有1个还是N个服务器，都能正常显示，还能避免空值报错（加上*ngIf="app"判断）。

方法二：直接通过索引访问（仅适用于确定数组有元素的情况） #

如果你能100%确定serveurs数组里至少有一个元素，也可以直接用索引[0]访问第一个元素：

<div *ngIf="app && app.serveurs.length > 0">
  <p>第一个服务器名称: {{app.serveurs[0].nom}}</p>
  <p>第一个服务器IP: {{app.serveurs[0].ip}}</p>
  <p>服务器状态: {{app.serveurs[0].indicateurs.STATUS}}</p>
</div>

⚠️ 注意：一定要加上*ngIf="app && app.serveurs.length > 0"判断，不然如果数组为空或者app还没加载完成，页面会报错。

方法三：用json管道调试（快速查看数据结构） #

如果只是想临时调试，看看serveurs里的完整数据结构，可以用Angular内置的json管道，把数组转换成格式化的JSON字符串显示：

<pre>{{app.serveurs | json}}</pre>

用<pre>标签是为了保留JSON的换行和缩进，看起来更清晰，调试完之后换成前面的方法就行。

额外建议：给数据定义TypeScript接口 #

为了让代码更规范，避免写错字段名，你可以在组件里给返回的数据定义接口，比如：

// 定义指标接口
interface Indicateur {
  BUILDDATE: string;
  STATUS: string;
  VERSION: string;
}

// 定义服务器接口
interface Serveur {
  id: number;
  nom: string;
  ip: string;
  indicateurs: Indicateur;
}

// 定义应用接口
interface Application {
  type: string;
  nom: string;
  equipes: Array<{nom: string}>;
  serveurs: Serveur[];
}

// 组件里的变量就用这个接口类型
app: Application;

这样写的话，IDE会给你字段的自动提示，还能在编译阶段检查出字段名拼写错误，非常实用。

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