Angular中如何仅展示JSON对象数组索引[0]的value值？

嘿，这问题我太熟了！你现在看到[object Object]，本质是因为user.site存的是整个site对象（包含value和display两个属性），而不是你想要的value值。下面给你两种简单的解决思路：

方法一：直接在模板里访问对象的value属性 #

既然user.site是个对象，那你可以直接在摘要面板里指定读取它的value属性，建议加上安全导航操作符?.，避免组件初始化时user.site还没赋值导致的报错：

<!-- 摘要面板的显示代码改成这样 -->
{{ user.site?.value }}

如果你的业务逻辑能确保user.site永远不会是null/undefined，也可以直接写：

{{ user.site.value }}

方法二：修改下拉菜单绑定逻辑，只存储value值 #

如果你从需求上就只需要site的value，那可以直接调整下拉菜单的绑定方式——把[ngValue]改成[value]，这样user.site直接存储的就是字符串类型的value，而非整个对象：

<div>
  <label>Select A Site</label>
  <select name="site" [(ngModel)]="user.site">
    <option *ngFor="let site of sites" [value]="site.value">
      {{site.display}}
    </option>
  </select>
</div>

修改后，你直接用{{ user.site }}就能显示对应的value（比如sunshine）了。

为啥会出现[object Object]？ #

简单解释下：当你用[ngValue]="site"时，是把整个site对象（比如{ value: 'sunshine', display: 'Sunshine' }）绑定给了user.site。当Angular尝试把这个对象转换成字符串展示时，JavaScript的默认行为就是输出[object Object]——这是所有对象的默认字符串表现形式。

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