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

Question

如何将静态数组数据替换为API请求的响应数据？

我下面有一个示例数据数组，我想用从 API 响应中获取的数据替换该数据，我该怎么做？

import { Mailbox } from './email';

export const mailboxList: Mailbox[] = [
  {
    MailId: 'bb428c03-1bc6-4f3d-9d5e-268ec44eebc3',
    fromId: '899d0e31-b71e-4d95-a8a0-6a8bceb314bd',
    Subject: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
    date: new Date('1-15-2020'),
    Message:
      '1.The phrase Lorem ipsum dolor sit amet consectetuer appears in Microsoft Word online Help. This phrase has the appearance of an intelligent Latin idiom. Actually, it is nonsense.',
    readStatus: false,
    seen: false,
    mailbox: 'Inbox',
    filter: ['Star'],
    label: ['Personal'],
  },
  {
    MailId: 'a19bf9fc-e877-49e7-a75a-b089a2c35f18',
    fromId: '3782c174-1f2c-4dc4-b75d-0bedf400e023',
    Subject: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
    date: new Date('1-10-2020'),
    Message:
      'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.',
    readStatus: false,
    seen: false,
    mailbox: 'Inbox',
    filter: ['Important'],
    label: ['Work'],
  },
];

我使用下面的代码获取请求图 API 来获取邮箱数据。

getMessages(url: string) {
  const newurl = url + '/mailFolders/inbox/messages';
  this.http.get<any>(newurl)
  .subscribe(response => {
      this.messages = response.value.map((message: any) => ({ 
          MailId: '',
          fromId: '',
          Subject: '',
          date: '',
          Message: '',
          readStatus: false,
          seen: false,
          mailbox: '',
          filter: '',
          label: '',
      }));
      console.log(this.messages);
  });
}

Answer 1

您应该彻底检查您的工作和存储数据的方式。

Angular 方式是创建一个服务，将数据存储在属性中，然后从 api 获取并更改该属性中的值。

@Injectable({providedIn: 'root'})
class MessagesService {
  ...
  list: Message[] = [...];

  loadFromApi(): void {
    this.http.get(...).subscribe(response => {
      this.list = response.value.map(...);
    });
  }
}

然后在组件中使用此服务，检索数据并在需要时获取。

---

如果您只需要一个针对您的情况的快速解决方法来使其工作，那么这将是一个可怕的代码 - 需要改变您的数组，例如使用

splice

:

getMessages(url: string) {
  const newurl = url + '/mailFolders/inbox/messages';
  this.http.get<any>(newurl)
  .subscribe(response => {
    mailboxList.splice(0, mailboxList.length, ...response.value.map(...));
  });

不要在真实的应用程序中这样做，只是为了1秒测试什么的。