Angular 5中FormControl绑定JSON显示[object object]，如何展示category_Name？

嘿，我来帮你搞定这个问题！你看到的[object object]是因为你直接把整个对象绑定到文本框了，而不是精准访问到category_Name这个属性值。咱们一步步来解决：

先明确你的数据结构 #

根据你说的，返回的是包含cats和cItem的数组，大概结构应该是这样的（用json管道确认的话）：

[
  {
    "cats": { "category_Name": "abc" },
    "cItem": "xxx"
  }
]

也就是一个数组，里面的每个元素是包含cats对象的实体。

错误原因 #

当你直接把数组或者数组里的整个对象绑定到文本框时，文本框会调用对象的toString()方法，默认输出就是[object object]——这不是数据的问题，是绑定的路径错了。

正确的绑定方式 #

情况1：返回的是单个元素的数组（最常见的场景） #

如果你的接口只返回一条数据（数组长度为1），那需要先取数组的第一个元素，再逐层访问到category_Name：

组件代码（假设你已经把接口返回的数据存在了apiData变量里）

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  apiData: any[] = [];

  constructor(private http: HttpClient) { }

  ngOnInit() {
    // 替换成你的接口地址
    this.http.get('your-server-api-url').subscribe((res: any[]) => {
      this.apiData = res;
    });
  }
}

HTML模板绑定

<!-- 用*ngIf避免数据未加载时的报错 -->
<div *ngIf="apiData && apiData.length > 0">
  <!-- 双向绑定到文本框 -->
  <input type="text" [(ngModel)]="apiData[0].cats.category_Name" />
  
  <!-- 也可以用单向绑定显示确认 -->
  <p>当前分类名：{{ apiData[0]?.cats?.category_Name }}</p>
</div>

这里的?.是可选链操作符，防止数据还没从服务器返回时，Angular因访问undefined属性而报错。

情况2：返回的是多个元素的数组 #

如果接口返回多条数据，需要用*ngFor循环遍历数组，逐个绑定每个元素的category_Name：

<div *ngFor="let item of apiData">
  <input type="text" [(ngModel)]="item.cats.category_Name" />
</div>

额外提醒 #

• 可以在组件里用console.log(this.apiData)打印数据，在浏览器控制台确认结构是否和你预期一致；
• 如果使用双向绑定[(ngModel)]，记得在模块里导入FormsModule，否则会报错。

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