Angular中如何用API请求数据替换静态数组数据？

1. 完善API返回数据的映射逻辑 #

首先要把Graph API返回的字段正确映射到Mailbox类型的属性上，比如Graph API的邮件字段里，id对应MailId，from.emailAddress.address对应fromId，subject对应Subject，receivedDateTime对应date，bodyPreview或body.content对应Message等。修改你的getMessages方法：

getMessages(url: string) {
  const newurl = url + '/mailFolders/inbox/messages';
  this.http.get<any>(newurl)
  .subscribe({
    next: (response) => {
      this.messages = response.value.map((message: any) => ({ 
          MailId: message.id,
          fromId: message.from?.emailAddress?.address || '',
          Subject: message.subject || '无主题',
          date: new Date(message.receivedDateTime),
          Message: message.bodyPreview || message.body?.content || '',
          readStatus: message.isRead || false,
          seen: message.isSeen || false,
          mailbox: 'Inbox',
          filter: message.importance === 'high' ? ['Important'] : [],
          label: ['Work'], // 可根据实际需求从API字段或自定义逻辑设置
      }));
      // 获取数据后更新全局变量
      this.mailGlobal.inboxList = this.messages;
      this.mailGlobal.global(); // 更新统计计数
      console.log(this.messages);
    },
    error: (err) => {
      console.error('获取邮件数据失败:', err);
    }
  });
}

2. 重构mailService，不再依赖静态数组 #

把服务中的方法改为从全局变量mailGlobalVariable中获取数据，替换原本依赖静态mailboxList的逻辑：

import { Injectable } from '@angular/core';
import { Mailbox } from './email';
import { mailGlobalVariable } from './mail-global-variable'; // 确保路径正确

@Injectable({
  providedIn: 'root'
})
export class mailService {
  constructor(private mailGlobal: mailGlobalVariable) {} // 注入全局变量

  public getInbox(): Mailbox[] {
    return this.mailGlobal.inboxList;
  }
  public getSent(): Mailbox[] {
    return this.mailGlobal.sentList;
  }
  public getDraft(): Mailbox[] {
    return this.mailGlobal.draftList;
  }
  public getSpam(): Mailbox[] {
    return this.mailGlobal.spamList;
  }
  public getTrash(): Mailbox[] {
    return this.mailGlobal.trashList;
  }
}

3. 在组件中初始化API数据 #

在邮件模块的入口组件（如根组件）的ngOnInit钩子中调用API，触发数据获取：

import { Component, OnInit } from '@angular/core';
import { YourApiService } from './your-api-service'; // 替换为你实际的API服务类
import { mailGlobalVariable } from './mail-global-variable';

@Component({
  selector: 'app-mail-root',
  templateUrl: './mail-root.component.html'
})
export class MailRootComponent implements OnInit {
  constructor(
    private apiService: YourApiService,
    private mailGlobal: mailGlobalVariable
  ) {}

  ngOnInit(): void {
    const graphBaseUrl = 'https://graph.microsoft.com/v1.0/me'; // 替换为你的Graph API基础路径
    this.apiService.getMessages(graphBaseUrl);
  }
}

补充说明 #

• 若需要获取已发送、草稿等其他文件夹的数据，调用对应Graph API接口即可，比如/mailFolders/sentitems/messages，映射后填充到mailGlobal对应的列表中
• 确保Graph API的权限配置正确，能正常读取邮件数据

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