Angular视图渲染API返回数据时显示[object Object]问题求助

调用返回ApiResponseModel<T>的API后，控制台能正常显示客户数据，但HTML视图中显示[object Object],[object Object]，无法正确渲染客户列表。

相关代码 #

API返回模型（C#）

public sealed class ApiResponseModel<T>
{
    //It Determines either the request has been processed successfully or not
    public bool IsSuccess { get; set; }

    //It will contains the return code of http request
    public int? ReturnCode { get; set; }

    //It will elaborate the return code reason
    public string? ReturnDescription { get; set; }

    //It contains the http request data
    public T? Result { get; set; }
}

Angular服务代码

getCustomerList(userId: string, systemIntegratorId: number):Observable<any>
{ 
  // console.table(this.http.get(endpoint +'GetCustomersList?' + 'userId=' + userId + '&systemIntegratorId=' + systemIntegratorId, httpOptions));
  return this.http.get(endpoint +'GetCustomersList?' + 'userId=' + userId + '&systemIntegratorId=' + systemIntegratorId, httpOptions);
}

Angular组件代码

export class CustomerComponent implements OnInit {
  //customerListResponse: ApiResponse={}; 
  customers:customerModel[]=[];//Had to initialise as was giving error otherwise
  constructor(private customerService: CustomerServiceService){}
  ngOnInit(): void {
    this.customerService.getCustomerList('e5fc6d55-c68c-4471-8aef-e43cc011c233', 2).
    subscribe({
      next: (data) => {
        var _data = data as ApiResponse; 
        this.customers = _data.result;
        console.table(this.customers); 
      }});
  }
}

Angular HTML代码

<div style="overflow:auto; position:relative;">
  {{customers}}
    <ul> <li *ngFor="let customer of customers"> 
          {{ customer.CustomerId }} 
        - {{ customer.CustomerName }} 
        - {{ customer.Address }}
        - {{ customer.CountryID }}
        - {{ customer.RegionID }}
        - {{ customer.CityID }}
        - {{ customer.Email }}
    </li> </ul>

</div>

1. 移除直接输出数组的代码 #

HTML中的{{customers}}会直接将数组对象转为字符串，导致显示[object Object],[object Object]，直接删除这一行即可。

2. 修正API响应属性的大小写问题 #

C#模型中数据字段为**Result（大写R）**，但组件代码中使用的是_data.result（小写r）。由于.NET后端默认序列化会将属性名转为驼峰式（result），需根据实际返回的JSON字段名调整：

• 若后端返回字段为Result（大写），则组件中改为_data.Result；
• 若后端返回字段为result（小写），则保持当前写法，建议通过定义强类型接口避免此类问题。

3. 定义强类型接口（推荐） #

在Angular中创建对应接口，避免any类型和类型断言的潜在问题：

// 客户模型接口
export interface CustomerModel {
  CustomerId: string;
  CustomerName: string;
  Address: string;
  CountryID: number;
  RegionID: number;
  CityID: number;
  Email: string;
}

// API响应接口
export interface ApiResponse<T> {
  isSuccess: boolean;
  returnCode?: number;
  returnDescription?: string;
  result?: T;
}

修改服务代码 #

import { ApiResponse, CustomerModel } from './models';

getCustomerList(userId: string, systemIntegratorId: number): Observable<ApiResponse<CustomerModel[]>> {
  const url = `${endpoint}GetCustomersList?userId=${userId}&systemIntegratorId=${systemIntegratorId}`;
  return this.http.get<ApiResponse<CustomerModel[]>>(url, httpOptions);
}

修改组件代码 #

export class CustomerComponent implements OnInit {
  customers: CustomerModel[] = [];

  constructor(private customerService: CustomerServiceService){}

  ngOnInit(): void {
    this.customerService.getCustomerList('e5fc6d55-c68c-4471-8aef-e43cc011c233', 2)
      .subscribe({
        next: (response) => {
          if (response.isSuccess && response.result) {
            this.customers = response.result;
          }
        }
      });
  }
}

4. 确认数据字段大小写匹配 #

确保HTML中绑定的字段名与实际返回的JSON字段名完全一致，比如后端返回customerId（驼峰）则需改为{{ customer.customerId }}，避免因大小写不匹配导致渲染失败。

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