连接两个可观察对象以通过 id 查找名称答案

【问题标题】：Connect two observables to find name by id连接两个可观察对象以通过 id 查找名称
【发布时间】：2023-01-08 18:59:50
【问题描述】：

我有 2 个端点：

users = [
 {
   id: 1,
   name: 'Mark',
   companyId: 1
 },
 {
   id: 2,
   name: 'Jack',
   companyId: 1
 },
]

companies = [
 {
   name: 'Facebook',
   id: 1
 }
]

现在，我如何构建我的观察者以获取每个用户的公司名称？所以在我的 html 中我可以做例如。用户.公司.名称

我现在的获取方法： baseUrl 是 localhost:3000/users

  getUsers(): Observable<IUser[]> {
    return this.http.get<IUser[]>(this.baseUrl).pipe(
      share()
    );
  }

【问题讨论】：

标签： angular typescript rxjs

【解决方案1】：

使用 forkJoin 并行获取用户和公司数据，然后将结果映射为所需类型。

forkJoin([
    this.http.get<IUser[]>(this.baseUrl + '/users'),
    this.http.get<IComapany[]>(this.baseUrl + '/comapnies')
]).pipe(map(([users, companies]) => users.map(user => 
    {
      return {
        "id": user.id,
        "name": user.name,
        "company": companies.find(x=> x.id == user.companyId)
      } 
    })
))

示例：https://stackblitz.com/edit/rxjs-wkdn3r

【讨论】：

【解决方案2】：

简短的回答是forkJoin。

例子：

const usersObservable = this._http.get('https://example/api/users');
const companiesObservable = this._http.get('https://example/api/companies');

const usersAndCompanies = Observable.forkJoin([usersObservable, companiesObservable])
  .subscribe(
     result => return this._joinUsersAndCompanies(result) 
  );


private _joinUsersAndCompanies(result) {

  const users = result[0];
  const companies = result[1];

  return users.map(user => {

    const matchedCompany = companies.find(company => company.Id === user.companyId);
    
    return {
      ...user,
      companyName: matchedCompany!.name
    };

  });
}

这只是一个草稿，我不确定它是否能正确编译和运行，但我希望你能理解。

如果你需要经常从API中获取用户和公司或者返回数据量大，你可以通过先将const companies转换并存储在一个映射中进行优化，这样你就可以在恒定时间内访问它们bigO(1)。

【讨论】：

【解决方案3】：

但是，如果我在数组 id: [1,3,5] 中有多个 id，我需要分配 f

【讨论】：