如何以角度组合两个数据存储？

Question

我有这个服务可以从 django rest api 获取对象列表。

import {Injectable} from '@angular/core';
import {Headers, Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import {environment} from '../../../environments/environment';
import {Delegation} from "../delegations/delegation";

@Injectable()
export class DelegationsService {

  private headers = new Headers({'Content-Type': 'application/json'});

  constructor(private http: Http) { }

  getDelegations(userid: number)  {
    return this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid )
      .map(res => <Delegation[]>res.json());
  }
}

../delegations/delegation.ts的内容是：

export class Delegation {
  id: number;
  delegator: number;
  delegatee: number;
}

委托人和被委托人的数字是“用户”的数据库 ID。我需要显示可通过另一个 REST API url 获得的实际用户名和登录 ID。我想我可以将../delegations/delegation.ts 修改成这样：

export class Delegation {
  id: number;
  delegator: number;
  delegator_login: string;
  delegator_name: string;
  delegatee: number;
  delegatee_login: string;
  delegatee_name: string;
}

然后我会迭代从this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid ) 调用中获得的元素并请求用户信息，但我不知道如何迭代结果集。

更新：

目前我可以将委托人数据转储到我的delegations.component.html模板和网页显示：

2 | 97597 | 5197 
4 | 97597 | 9757 

我要显示的是：

2 | Sam Smith (ssmith) | Lisa Butts (lbutts) 
4 | Sam Smith (ssmith) | Bill Fatlips (bfatlips) 

我的delegations.component.html很简单：

<ul class="delegations">
  <li *ngFor="let delegation of delegations" [class.selected]="delegation === selectedDelegation" (click)="onSelect(delegation)">
    <span class="badge">{{delegation.id}}</span> | {{delegation.delegator}} | {{delegation.delegatee}}
  </li>
</ul>

这几乎就是他们在 Heroes Angular 中的内容：https://angular.io/tutorial/

Answer 1

尝试这样做：

getDelegations(userid: number)  {
    return this.http.get(environment.apiUrl + '/api/v1/delegations/' + userid )
      .map(res => {
        const theList = <any[]>res.json();
        theList.forEach(item => {
          this.http.get(environment.apiUrl + '/api/v1/delegaor/' + item.delegator)
              .map(res2 => {
                const delegator = res2.json();
                item.delegator_login = delegator.login;
                item.delegator_name = delegator.name;
              });
          this.http.get(environment.apiUrl + '/api/v1/delegatee/' + item.delegatee)
              .map(res3 => {
                const delegatee = res3.json();
                item.delegatee_login = delegatee.login;
                item.delegatee_name = delegatee.name;
              })
        })
        return theList;
      } )
      .subscribe(finalList => {
        // this finalList is your delation list with names and logins and ids
      });
  }

我有点担心 finalList 会在内部 api 调用之前返回，但我认为订阅会在返回之前等待它全部完成。这个解决方案当然是假设您将字符串添加到您的委托类中。