Question

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

首次通话：

GET /getInfo

响应：[{id：111，姓名：杰克，电话：123456789}，.....]

第二通电话：

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

响应：{状态：可用}

我要做的是在ngOnInit（）中进行第一个调用，并在循环中进行第二个

但是，当我在ngFor中获取ID并希望进行第二次调用时，如果我在ngFor中调用该函数，则api将被频繁调用。有什么办法可以避免这种情况？还是有更好的方法拨打第二个电话？

Answer 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))
    );
  }

Angular6中ngFor中的api调用

1 个答案: