如何在Angular中使用GET函数调用指定API并展示数据？

1. 导入必要模块 #

需要在你的模块（如AppModule或站点功能模块）中导入HttpClientModule，Angular的HTTP请求依赖该模块：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ...其他导入项
    HttpClientModule
  ]
})
export class AppModule { }

2. 定义数据接口（保证类型安全） #

根据API返回的结构，创建对应的TypeScript接口，用于类型校验和开发时的智能提示：

// src/app/models/site.model.ts
export interface Auditable {
  createdBy: string | null;
  createdServerDateUTC: string | null;
  createdLocalTime: string | null;
  lastUpdateBy: string | null;
  lastUpdateServerDateUTC: string | null;
  lastUpdateLocalTime: string | null;
  deletedBy: string | null;
  deletedLocalTime: string | null;
  deletedServerDateUTC: string | null;
}

export interface Site {
  id: string;
  auditable: Auditable;
  name: string;
  address: string;
  description: string;
  contactInfo: string | null;
  companyId: string;
}

export interface SiteResponse {
  results: Site[];
  totalNumberOfRecords: number;
}

3. 创建服务封装API调用 #

封装一个SiteService来处理HTTP请求，实现组件与API逻辑的解耦：

// src/app/services/site.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { SiteResponse } from '../models/site.model';

@Injectable({
  providedIn: 'root' // 全局注册服务
})
export class SiteService {
  private apiUrl = 'https://lhp-command-center-webapi-dev.azurewebsites.net/api/sites/List';

  constructor(private http: HttpClient) { }

  getSites(): Observable<SiteResponse> {
    // 发起无参数的GET请求
    return this.http.get<SiteResponse>(this.apiUrl);
  }
}

这里需要在构造函数中注入HttpClient，这是Angular HTTP模块提供的核心请求服务。

4. 组件中调用服务并获取数据 #

在站点页面组件中注入SiteService，在组件初始化阶段调用API获取数据：

// src/app/components/site-list/site-list.component.ts
import { Component, OnInit } from '@angular/core';
import { SiteService } from '../../services/site.service';
import { Site } from '../../models/site.model';

@Component({
  selector: 'app-site-list',
  templateUrl: './site-list.component.html',
  styleUrls: ['./site-list.component.css']
})
export class SiteListComponent implements OnInit {
  sites: Site[] = [];
  totalRecords: number = 0;

  constructor(private siteService: SiteService) { }

  ngOnInit(): void {
    this.loadSites();
  }

  private loadSites(): void {
    this.siteService.getSites().subscribe({
      next: (response) => {
        this.sites = response.results;
        this.totalRecords = response.totalNumberOfRecords;
      },
      error: (err) => {
        // 处理请求错误，比如打印日志或提示用户
        console.error('加载站点数据失败:', err);
      }
    });
  }
}

5. 模板中渲染站点数据 #

在组件的HTML模板里，使用*ngFor遍历站点数据，展示所需字段：

<!-- src/app/components/site-list/site-list.component.html -->
<h2>站点列表</h2>
<p>总站点数: {{ totalRecords }}</p>

<div class="site-grid">
  <div class="site-card" *ngFor="let site of sites">
    <h3>{{ site.name }}</h3>
    <p><strong>地址:</strong> {{ site.address }}</p>
    <p><strong>描述:</strong> {{ site.description }}</p>
    <p><strong>联系人信息:</strong> {{ site.contactInfo || '无' }}</p>
    <p><strong>创建人:</strong> {{ site.auditable.createdBy }}</p>
    <p><strong>创建时间:</strong> {{ site.auditable.createdLocalTime }}</p>
  </div>
</div>

核心注意点 #

• 必须导入HttpClientModule才能使用HttpClient服务；
• 服务构造函数需注入HttpClient，组件构造函数需注入SiteService；
• 使用TypeScript接口定义数据结构，提升代码可维护性；
• 订阅Observable时必须处理成功和错误回调，避免未捕获异常。

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