Question

当我的视图被初始化时，会发出2个HTTP请求，并将数据保存到两个不同的数组中。我不希望在我的html中有两个for循环来从两者中获取信息。我的问题是如何将返回的信息推送到一个数组？那可能吗？我必须使用localstorage吗？（接口中的键和json响应中返回的键的名称完全相同）。

我需要在第一个响应中保存id，group，预设，在第二个响应中保存colorCode，colorGrade，colorType（我在下面的每个订阅中留下评论）

info: infoInterface[];
info2: infoInterface[];

ngOnInit() {

  this.getInfo.getPCode()
    .subscribe(
      (dieInfo: DieInfoInterface[]) => this.dieInfo = dieInfo,
      // On response I need to store id, group, preset 
      (error: Response) => console.log(error)
    );

  this.getInfo.getCCodes()
    .subscribe(
      (dieInfo2: DieInfoInterface[]) => {
      // on response I need to store colorCode, colorGrade, colorType
        this.dieInfo2 = dieInfo2

      },
      (error: Response) => console.log(error)
    );
}

getInfo服务

getPCode(): Observable<any> {
  return this.http.get('')
    .map(
      (response: Response) => {
        return response.json().inform;
      }
    );
}

getCCodes(): Observable<any> {
  return this.http.get('')
    .map(
      (response: Response) => {
        return response.json().inform;
      }
    );
}

界面

export interface infoInterface {

  id: number;
  group: any;
  colorCode: string;
  colorGrade: any;
  colorType: string;
  preset: string;
}

我如何显示数据。目前我正在显示来自info[]的数据，因为我不想要两个for循环

<div class="row" *ngFor="let i of info">
  <div class="info col-sm-3">
    <div class="row">
      <h1>Die: </h1>
      <p> {{ info.id }} </p>
    </div>

    <div class="row">
      <h1>Color Code: </h1>
      <p> {{ info.group }} </p>
    </div>
  </div>
</div>

Answer 1

最新组合会在您发出的两个项目中为您提供两个最新项目。

this.getInfo.getPCode()
  .combineLatest(this.getInfo.getCCodes())
  .subscribe(([pcodes, ccodes]) => {
     const allcodes = pcodes.map((el, i) => {
        return { ...el, ...ccodes[i] };
     });
  });

Answer 2

以前的答案应该有效，但是因为你得到的那个combineLatest不存在错误我会想象你错过了你的import语句

  import 'rxjs/add/observable/combineLatest';

Answer 3

RxJs的答案可能更好，更优雅，但下面也可以，不需要本地存储。

info: infoInterface[] = [];

ngOnInit() {

  this.getInfo.getPCode()
    .subscribe(
      (dieInfo: DieInfoInterface[]) => this.info = this.info.concat(dieInfo),
      // On response I need to store id, group, preset 
      (error: Response) => console.log(error)
    );

  this.getInfo.getCCodes()
    .subscribe(
      (dieInfo2: DieInfoInterface[]) => {
      // on response I need to store colorCode, colorGrade, colorType
        this.info = this.info.concat(dieInfo2)

      },
      (error: Response) => console.log(error)
    );
}

将两个HTTP响应推送到一个数组

3 个答案: