Angular中API数据已获取但页面无法渲染问题求助

核心问题 #

1. Service缺失HttpClient导入：service.ts中未导入HttpClient，导致依赖注入失败
2. API返回数据类型不匹配：调用的API返回的是数组格式（而非单个对象），模板中直接访问data.Name会因类型错误无法渲染
3. 初始值未定义导致模板报错：data初始为undefined，Angular渲染时会因无法读取属性抛出错误，阻断后续渲染
4. 代码语法不完整：app.component.ts中ngOnInit内的subscribe代码未闭合，可能导致组件逻辑执行异常

分步修复 #

1. 修复Service的HttpClient导入 #

修改service.ts，添加HttpClient的导入：

import { Injectable } from '@angular/core';
// 新增HttpClient导入
import { HttpClient } from '@angular/common/http';

@Injectable({
   providedIn: 'root'
})
export class ApiserviceService {
  constructor(private _http:HttpClient){}
  getdata(){
    return this._http.get('https://mocki.io/v1/8f823c35-8ae8-4fb5-a84b-cf7dce59c7a7');
  }
}

2. 处理API返回的数组数据 #

API返回的是包含单个对象的数组，可根据场景选择以下两种方案：

方案一：取数组第一个元素（适合单条数据场景）

修改app.component.ts：

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

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
 title = 'apidata';
 data: any = {}; // 初始化为空对象，避免模板报错

 constructor(private _apiservie:ApiserviceService){}

 ngOnInit(){
   this._apiservie.getdata().subscribe(res=>{
     // 取数组第一个元素赋值
     this.data = res[0];
     console.log(res)
   }); // 闭合subscribe的括号与分号
 }
}

方案二：用*ngFor遍历数组（适合多条数据场景）

修改app.component.html：

<div *ngFor="let item of data">
  <p>{{item?.Name}}</p>
  <p>{{item?.Habitat}}</p>
  <p>{{item?.Status}}</p>
</div>

同时修改app.component.ts初始化data为空数组：

data: any[] = []; // 初始化为空数组

3. 添加安全导航运算符（推荐） #

在模板中使用?.安全导航运算符，避免数据未加载完成时的报错：

<p>{{data?.Name}}</p>
<p>{{data?.Habitat}}</p>
<p>{{data?.Status}}</p>

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