如何从Express后端API获取数据并在Angular中展示？

没问题！既然你的后端API已经能正常返回结构化数据了，咱们一步步来把这些数据在Angular里展示出来：

步骤1：创建Angular服务处理API请求 #

Angular推荐用服务封装HTTP请求逻辑，让组件专注于数据展示。先生成一个服务：

ng generate service data

然后在data.service.ts里编写请求API的代码（顺便定义数据类型让代码更规范）：

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

// 定义接口匹配后端返回的数据结构
export interface DataItem {
  Issuer_Id: number;
  Data_Id: number;
  Data_Name: string;
}

export interface ApiResponse {
  status: number;
  data: DataItem[];
  message: string | null;
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'http://localhost:3000/api'; // 你的API地址

  constructor(private http: HttpClient) { }

  getData(): Observable<ApiResponse> {
    return this.http.get<ApiResponse>(this.apiUrl);
  }
}

步骤2：在组件中调用服务获取数据 #

比如在首页组件（app.component.ts）里注入服务，获取并存储数据，同时处理加载和错误状态：

import { Component, OnInit } from '@angular/core';
import { DataService, DataItem } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  dataItems: DataItem[] = [];
  isLoading = true;
  errorMessage = '';

  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.dataService.getData().subscribe({
      next: (response) => {
        this.dataItems = response.data;
        this.isLoading = false;
      },
      error: (err) => {
        this.errorMessage = '加载数据失败，请检查API连接';
        this.isLoading = false;
        console.error(err);
      }
    });
  }
}

步骤3：在组件模板中渲染数据 #

在app.component.html里用Angular指令把数据展示出来，比如用表格呈现：

<!-- 加载状态提示 -->
<div *ngIf="isLoading">正在加载数据...</div>

<!-- 错误提示 -->
<div *ngIf="errorMessage" style="color: red;">{{ errorMessage }}</div>

<!-- 数据表格 -->
<table *ngIf="dataItems.length > 0" border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Issuer ID</th>
      <th>Data ID</th>
      <th>Data Name</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of dataItems">
      <td>{{ item.Issuer_Id }}</td>
      <td>{{ item.Data_Id }}</td>
      <td>{{ item.Data_Name }}</td>
    </tr>
  </tbody>
</table>

<!-- 空数据提示 -->
<div *ngIf="!isLoading && dataItems.length === 0">暂无数据</div>

关键注意事项 #

• 必须在app.module.ts里导入HttpClientModule，否则HTTP请求会失效：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入这个模块

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // 添加到imports数组
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 如果浏览器报跨域（CORS）错误，需要在你的Node.js/Express后端配置CORS：
  先安装依赖：

  npm install cors
  

  然后在Express代码中启用：

  const cors = require('cors');
  app.use(cors());
  

这样就能顺利把后端的数据展示在Angular页面里啦！

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