Angular 2+：填充 <select> 并设置选定值的 API 调用答案

【问题标题】：Angular 2+: API Calls to populate <select> and set selected valueAngular 2+：填充 <select> 并设置选定值的 API 调用
【发布时间】：2020-10-24 11:49:37
【问题描述】：

假设我有两个 REST API 端点，如下所示：

要加载查找列表（例如位置）：host/api/locations
加载用户详细信息：host/api/user/1

我将在 HTML 表单上显示此信息，该表单有一个用于加载位置列表的内容。加载用户详细信息时，应将默认选择值设置为用户的家庭位置，这是用户详细信息的一部分。

我知道我可以通过链接来做到这一点，或者使用订阅方法或using flatmap in RxJs。但它们实际上都是针对第二个 API 调用依赖于第一个响应的情况。在我的情况下，两个 API 调用之间没有依赖关系，唯一的问题是位置应该加载到用户的家庭位置以设置为选定值。

最好的方法是什么？

【问题讨论】：

标签： angular api chaining flatmap

【解决方案1】：

这里，rxjs forkJoin 运算符来帮你了。它确保在所有可观察对象的响应到达时发出值。这是来自 rxjs 网站的描述

一个常见的用例是，如果您希望在页面加载（或某些其他事件）时发出多个请求，并且只想在收到所有响应时采取行动。 (detailed link)

你的实现应该是这样的

      let req1$ = this.apiService.api1(); //first observable
      let req2$ = this.apiService.api2(); //second observable
      
      forkJoin(req1$, req2$).subscribe(([response1, response2])=>{
      //Your implementation shall go here.
      });

谢谢。

【讨论】：

谢谢，我想这就是我需要的。只有一件事 - 这里 apiService 返回观察值对吗？
是的。另请注意 rxjs 编码风格，如果变量名称以美元符号 ($) 结尾，则暗示这是一个可观察的 :-)

【解决方案2】：

ForkJoin 将为您服务。

‘forkJoin’ 是最简单的方法，当您需要等待多个 HTTP 请求被解析时。

‘forkJoin’ 等待每个 HTTP 请求完成，并将每个 HTTP 调用返回的所有 observable 分组到单个 observable 数组中，最后返回该 observable 数组。

const locations = this.http.get('host/api/locations');
const user = this.http.get('host/api/user/1');

forJoin(locations,user).subscribe(result => {
result[0]; // location
result[1]; // user
})

【讨论】：