0

我有两个接口，分别是 Team 和 Company

public interface Team {
  id: number;
  name: string;
  companyId: number;
}

public interface Company {
  id: number;
  name: string;
}

这是样本数据：

"companies": [
    {
      "id": 3,
      "name": "XSoftware",
      "location": "Nagar"
    },
    {
      "id": 5,
      "name": "Google",
      "location": "Seattle"
    },
    {
      "id": 7,
      "name": "YS",
      "location": "Dhanmondi"
    },
    {
      "id": 8,
      "name": "Amazon",
      "location": "Seattle DC"
    },
    {
      "name": "ToTD",
      "location": "Pink City",
      "id": 10
    }
]

"teams": [
    {
      "id": 1,
      "name": "Team X",
      "expertise": "Java",
      "companyId": 3
    },
    {
      "id": 2,
      "name": "Team Y",
      "expertise": "Angular",
      "companyId": 3
    },
    {
      "id": 3,
      "name": "Team Z",
      "expertise": "Spring Boot",
      "companyId": 8
    },
    {
      "id": 4,
      "name": "Team M",
      "expertise": "Node Js",
      "companyId": 5
    }
]

所以我想根据companyId将company作为财产分配给每个团队。像这样：

"teams": [
    {
      "id": 1,
      "name": "Team X",
      "expertise": "Java",
      "companyId": 3,
      "company": {
         "id": 3,
          "name": "XSoftware",
          "location": "Nagar"
       }
    },
    {
      "id": 2,
      "name": "Team Y",
      "expertise": "Angular",
      "companyId": 3,
      "company": {
         "id": 3,
          "name": "XSoftware",
          "location": "Nagar"
       }
    },
    {
      "id": 3,
      "name": "Team Z",
      "expertise": "Spring Boot",
      "companyId": 8,
      "company": {
         "id": 8,
         "name": "Amazon",
         "location": "Seattle DC"
       }
    },
    {
      "id": 4,
      "name": "Team M",
      "expertise": "Node Js",
      "companyId": 5,
      "company": {
         "id": 5,
         "name": "Google",
         "location": "Seattle"
       }
    }
]

那么如何使用 RxJs 实现这一点。我有两个分别返回 Team[] 和 Company[] 的 Observable 的 observable。

const teams$: Observable<Team[]> = this.httpClient.get<Team[]>('/teams');
const companies$: Observable<Company[]> = this.httpClient.get<Company[]>('/companies');

那么，如何做到这一点？我知道它可以以命令式的方式完成（通过使用循环、if-else 等），但我想通过只使用反应式运算符、观察者来以反应式的方式做到这一点。

4

3 回答 3

2

正如ShamPooSham评论的那样，一种方法是使用forkJoin运算符。看看下面的代码片段 

const teams$ = this.httpClient.get<Team[]>('/teams');
const companies$ = this.httpClient.get<Company[]>('/companies');

const teamsWithCompanies = forkJoin(teams$, companies$).pipe(
  switchMap((values: any[]) => {
    const teamsWithCompaniesResponse: TeamWithCompany[] = [];
    const teamArray = values[0];
    teamArray.forEach((team) => {
      const teamWithCompany: TeamWithCompany = {
          id: team.id,
          name: team.name,
          expertise: team.expertise,
          companyId: team.companyId,
          company: values[1].find(c => c.id === team.companyId)
      }
      teamsWithCompaniesResponse.push(teamWithCompany);
    })

    return of(teamsWithCompaniesResponse);
  })
).subscribe(response => {
  console.log('[RESPONSE]', response);
})
于 2020-04-14T05:51:36.537 回答
1

得到两个数组响应后

let arr3 = this.teams.map((item, i) => Object.assign({}, item, { company: (this.companies.find((itmInner) => itmInner.id === this.teams[i].companyId)) }));
    console.log(arr3);
于 2020-04-14T05:58:01.773 回答
-1

首先，您需要团队和公司对象来合并它们。所以你能做的是

this.httpClient.get<Team[]>('/teams').subscribe(teams => {
  this.httpClient.get<Company[]>('/companies').subscribe(companies => {
    //here you have teams and companies array
    var result = [];

    teams.forEach(team => {
      var company = companies.find(s => s.id == team.companyId);
      if(company){
      Object.assign(team , {company});
      result.push(team);
      }
    })

    console.log(result);
  })
})

这应该可以解决问题

此外，如果您在不同的地方同时拥有这两个 observables，您会以某种方式找到一种方法来让这两个数组合并它。

谢谢

于 2020-04-14T05:53:52.760 回答