Angular6中ngFor中的api调用答案

【问题标题】：api call within ngFor in Angular6Angular6中ngFor中的api调用
【发布时间】：2018-10-22 10:17:20
【问题描述】：

我正在使用angular6 创建一个单页应用程序来显示一些需要两次api 调用的信息

第一次通话：

GET /getInfo

响应：[{id: 111, name: jack, phone: 123456789}, .....]

第二次通话：

GET /available?id (takes the id get from the first request)

响应：{状态：可用}

我要做的是在 ngOnInit() 中进行第一次调用，然后在循环中进行第二次调用

但是，当我在 ngFor 中获取 id 并想要进行第二次调用时，如果我在 ngFor 中调用该函数，则该 api 将被频繁调用。有没有办法避免这种情况？或者有什么更好的方法来打第二个电话？

【问题讨论】：

你看过 Angular 文档，特别是教程吗？ BTW angular6 不应该被标记为 angularjs - 它应该被标记为直角。
@DaleBurrell 感谢您的回复！我今天确实看了很多文档，我所做的是在 ngOnInit() 下进行第一个 api 调用，并尝试在 ngFor 循环中调用第二个 api 调用。但是，第二次调用会不断重复。
在这种情况下，您需要编辑您的问题以显示您尝试过的内容 - 否则问题太笼统了。

标签： angular

【解决方案1】：

我假设您有两个服务方法，以及为每个返回值定义的类，例如：

export class Info {
  id: number;
  name: string;
  phone: string;
}

export class Availability {
 status: string;
}

getInfo(): Observable<Info> {
  return this.http.get<Info>("http://myservice.com/info");
}

getStatus(info: Info): Observable<Availability> {
  return this.http.get<Status>("http://myservice.com/available?id=" + info.id);
}

那么你会这样做：

 getAvailability(): Observable<Availability> {
    return this.getInfo().pipe(
       mergeMap(info => getStatus(info))
    );
  }

【讨论】：

我确实有那些服务方法，但是我可以知道什么时候调用第二个服务，因为我不想和按钮触发它（直接列出所有信息）。抱歉，我对 Angular 很陌生。
对不起，我不明白你的问题。请向我们展示您到目前为止所做的尝试，也许我们可以了解您正在尝试做什么。