Angular项目调用本地API后无法可视化数据，显示[object Object]求助

问题描述 #

我正在为Web开发课程制作个人作品集，之前用.json文件获取数据一切正常，但调用本地localhost接口时，浏览器控制台能返回正确的数据表，但HTML中插入数据时显示[object Object]，尝试获取模型的单个属性也无任何反应。

相关代码与接口响应 #

Model.ts #

export class info {
  id?: String;
  name: String;
  about: String;

  constructor(name: String,about: String){
    this.name = name;
    this.about = about;
  }
}

HTML文件 #

<div class="card mb-1 card-body">
    <div class="card-titles">
      <h3>Acerca de</h3>
      <div class="btn-edit">
        <a href="#" class="btn-right"><i class="fa-solid fa-pen-to-square"></i></a>
      </div>
    </div>
    <p class="card-text">{{info}}</p>
  </div>

Component.ts #

import { InfoService } from './../../services/info.service';
import { Component, OnInit } from '@angular/core';
import { info } from 'src/app/model/info.model';

@Component({
  selector: 'app-about-me',
  templateUrl: './about-me.component.html',
  styleUrls: ['./about-me.component.css']
})
export class AboutMeComponent implements OnInit {
  info: info = new info("","");

  constructor(public infoService: InfoService) { }

  ngOnInit(): void {
    this.infoService.getInfo().subscribe(data => {this.info = data})
  }
}

InfoService.ts #

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { info } from '../model/info.model';

@Injectable({
  providedIn: 'root'
})
export class InfoService {

  constructor(private http : HttpClient) { }

  public getInfo(): Observable<info>{
    return this.http.get<info>('http://localhost:8080/api/info/get');
  }
}

本地API响应 #

XHRGEThttp://localhost:8080/api/info/get
[HTTP/1.1 200  243ms]

[{"id":2,"name":"Eric Diaz","position":"Full Stack Web Developer Jr.","ubication":"Viedma, Rio Negro (Argentina)","banner":"https://i.imgur.com/zKNwxBl.jpg","profilePic":"https://imgur.com/rC52iuo.jpg","about":"Desarrollador Web autodidacta, encantado por aprender nuevas tecnologías, lenguajes de programación. Gran entusiasta en base de datos."}]

解决方案 #

核心问题是API返回的是包含单个对象的数组，但你的代码将其当作单个info对象处理，导致赋值和渲染出错，按以下步骤修改：

1. 调整服务的返回类型 #

服务中getInfo()的返回值应为数组类型的Observable，匹配API响应格式：

import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { info } from '../model/info.model';

@Injectable({
  providedIn: 'root'
})
export class InfoService {

  constructor(private http : HttpClient) { }

  // 修改返回类型为数组的Observable
  public getInfo(): Observable<info[]>{
    return this.http.get<info[]>('http://localhost:8080/api/info/get');
  }
}

2. 调整组件的变量定义与数据处理 #

将组件中的变量改为数组类型，或直接取数组第一个元素（根据需求选择）：

import { InfoService } from './../../services/info.service';
import { Component, OnInit } from '@angular/core';
import { info } from 'src/app/model/info.model';

@Component({
  selector: 'app-about-me',
  templateUrl: './about-me.component.html',
  styleUrls: ['./about-me.component.css']
})
export class AboutMeComponent implements OnInit {
  // 方案一：用数组存储所有返回数据
  infoList: info[] = [];
  // 方案二：只存储单个对象（确定只有一条数据时）
  // info: info = new info("", "");

  constructor(public infoService: InfoService) { }

  ngOnInit(): void {
    this.infoService.getInfo().subscribe(data => {
      // 方案一赋值数组
      this.infoList = data;
      // 方案二取数组第一个元素
      // this.info = data[0];
    })
  }
}

3. 调整HTML渲染逻辑 #

根据组件的变量类型，选择对应的渲染方式：

方案一：遍历数组（适合未来可能有多条数据的场景）

<div class="card mb-1 card-body">
    <div class="card-titles">
      <h3>Acerca de</h3>
      <div class="btn-edit">
        <a href="#" class="btn-right"><i class="fa-solid fa-pen-to-square"></i></a>
      </div>
    </div>
    <div *ngFor="let item of infoList" class="card-text">
      <p>{{item.name}}</p>
      <p>{{item.about}}</p>
    </div>
  </div>

方案二：直接渲染单个对象（确定只有一条数据时）

<div class="card mb-1 card-body">
    <div class="card-titles">
      <h3>Acerca de</h3>
      <div class="btn-edit">
        <a href="#" class="btn-right"><i class="fa-solid fa-pen-to-square"></i></a>
      </div>
    </div>
    <!-- 使用?安全导航操作符避免数据未加载时的空值报错 -->
    <p class="card-text">{{info?.name}}</p>
    <p class="card-text">{{info?.about}}</p>
  </div>

注意：之前直接写{{info}}会将对象转为字符串，因此显示[object Object]，必须明确访问对象的具体属性（如info.name）才能正常显示内容。

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