代码之家 › 专栏 › 技术社区 › SidC

如何存储API响应的一部分以便在新的HttpGet语句中使用?

angular

SidC · 技术社区 · 6 年前

 getVotes(groupId: number): Observable<Vote[]> {
     let groupId = getGroupById();
     return this.authService
       .get('/votes/' + groupId.toString());

 }

在上面的例子中,我希望根据用户的groupId获得给定组的投票。为了获取用户的groupId,我尝试了以下方法:

getGroupbyId(){
   this.http.get(`${environment.apiUrl}/groups`);
}

ngOnInit() {
this.myProfile = this.route.snapshot.data.profile;
this.getGroups();
this.getVotes();
this.getVoteInsights();
this.getProfileInsights();
this.getGroupInvites();
}
private getGroups(): void{
  this.groupService.getGroups()
  .subscribe(
    groups => this.groups = groups
  );
}

private getVotes(): void {
  this.voteService.getVotes(this.groupId)
   .subscribe(
     votes => this.votes = votes
    );
 }

API调用getGroups的输出如下:

{
    "id": 1,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Sid's Test Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 2,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 3,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 4,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "Testing Create Group",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 5,
    "name": "Sid's Test Group",
    "imageUrl": "",
    "about": "A Test Group created by Sid",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
},
{
    "id": 6,
    "name": "Another Test Group",
    "imageUrl": "",
    "about": "Testing 123",
    "membershipApprovalType": 0,
    "groupInviteType": 0,
    "groupType": 0
}

我想要一些关于如何最好地存储getGroupbyId调用中的所有groupId的指导,从UI传递所选的groupId并在getGroupbyId调用中使用它。

2 回复 | 直到 6 年前

inorganik 6 年前

这就是rxjs操作符真正闪耀的地方。

在您的服务中,您创建 groupId$ 属性:

groupId$: Observable<number>;

然后在构造函数中将值设置为 http.get() :

constructor(private http: HttpClient) {
  this.groupId$ = this.http.get(`${environment.apiUrl}/groups`);
}

无论何时你需要使用它:

getVotes(): Observable<Vote[]> {
  return this.groupId$.pipe(
    exhaustMap(groupId => this.authService
      .get('/votes/' + groupId.toString());
    )
  );
}

排气图 组ID$ authService.get() 可观察的。它将始终使用 组ID$ 所以它以某种方式被缓存了。

Jan B. HDR 6 年前

当你的 groupId 属于已登录的用户,您应该有 PrincipalService 其中包含有关已登录用户的信息、他的权限,很可能还有他的groupId。这样的服务通常在整个应用程序中共享。您可以将它注入到组件中,并在任何地方接收用户对象/其groupId。