Angular组件中如何读取API返回的对象属性

你遇到的这个错误，核心原因很简单：*ngFor指令是用来遍历数组或可迭代集合的，但你现在把一个单一的JSON对象直接赋值给了数组类型的变量，Angular没法对单个普通对象执行遍历操作，所以就抛出了"Cannot find a differ supporting object '[object Object]'"这个错误。

下面给你两种针对性的解决方案，根据你的实际需求选择：

方案一：直接访问单个对象的属性（推荐，因为你的API返回的是单个对象） #

如果API本来就只返回一个客户对象，那完全不需要用*ngFor，直接在模板里访问对象属性即可：

1. 调整组件代码（customerComponent.ts） #

先定义一个接口来规范对象类型（可选但非常推荐，能获得类型提示和编译检查），然后把变量定义为单个对象类型：

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

// 定义客户对象的接口
interface Customer {
  packBarCode: string;
  usedQty: number;
  description: string;
  customerName: string;
}

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  // 定义为单个Customer对象，而非数组
  customerDetails: Customer | undefined;

  ngOnInit(): void {
    // 模拟从API获取数据
    const apiResponse = { "packBarCode":"Q122344", "usedQty":11, "description":"Box of Chocs", "customerName":"Retail Mart" };
    this.customerDetails = apiResponse;
  }
}

2. 调整模板代码（.html） #

用*ngIf确保对象存在后，直接通过.访问属性，同时用安全导航操作符?防止空值报错：

<div *ngIf="customerDetails">
  <p>客户名称：{{ customerDetails.customerName }}</p>
  <p>已使用数量：{{ customerDetails.usedQty }}</p>
  <p>商品描述：{{ customerDetails.description }}</p>
  <p>包装条码：{{ customerDetails.packBarCode }}</p>
</div>

方案二：把单个对象包装成数组（适合需要用*ngFor的场景） #

如果你确实需要保留数组类型的变量（比如未来API可能返回多个客户），可以把单个对象放进数组里再赋值：

1. 调整组件代码（customerComponent.ts） #

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

interface Customer {
  packBarCode: string;
  usedQty: number;
  description: string;
  customerName: string;
}

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  // 保持数组类型
  customerDetails: Customer[] = [];

  ngOnInit(): void {
    const apiResponse = { "packBarCode":"Q122344", "usedQty":11, "description":"Box of Chocs", "customerName":"Retail Mart" };
    // 将单个对象包装成数组
    this.customerDetails = [apiResponse];
  }
}

2. 模板代码可以保留你原来的写法 #

现在customerDetails是数组了，*ngFor就能正常遍历：

<ng-container *ngFor="let customer of customerDetails">
  {{ customer.customerName }}
  <!-- 其他属性也可以这样访问：{{ customer.usedQty }}、{{ customer.description }} 等 -->
</ng-container>

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