Question

我试图在json中得到一个响应，我得到一个包含每个声明的数组，其中包含用户和类别。我有静态修复，但我想让它变得动态，似乎无法使其正常工作。

编辑：我静静地插入了“id”＃39;在方法中，所以我只得到一个声明。我想创建一些循环，我可以回到http://localhost:8080/declaraties上的声明。我已经尝试过嵌套的http但没有成功。

代码：

data.service.ts

    import { Injectable } from '@angular/core';
    import {Http} from '@angular/http';
    import {Observable} from 'rxjs/Observable';
    import 'rxjs/add/observable/forkJoin';
    import 'rxjs/add/observable/of';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/mergeMap';

@Injectable()
export class DataService {

  constructor(private http: Http) { }

  url = 'http://localhost:8080/declaraties/';

  getAllesVanDeclaraties(id: number): Observable<any> {
    return Observable.forkJoin([
      this.http.get('http://localhost:8080/declaraties/' + id).map(res => res.json()),
      this.http.get('http://localhost:8080/declaraties/' + id + '/gebruiker').map(res => res.json()),
      this.http.get('http://localhost:8080/declaraties/' + id + '/categorie').map(res => res.json())
    ])
      .map((data: any[]) => {
          const declaraties: any = data[0];
          const gebruiker: any[] = data[1];
          const categorie: any[] = data[2];
          declaraties.gebruiker = gebruiker;
          declaraties.categorie = categorie;
          return declaraties;
      });
  }
}

row.component.html

<ng-container *ngFor="let decl of data; let i = index;">

    <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
      <th>{{i + 1}}</th>

      <td>{{decl['gebruiker'].naam}}</td>
      <td>{{decl.datumIngediend}}</td>
      <td>{{decl.omschrijving}}</td>
      <td>{{decl['categorie'].naam}}</td>
      <td>&euro; {{decl.bedrag}}</td>

    </tr>......

row.component.ts

import {Component, OnInit} from '@angular/core';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/mergeMap';
import {DataService} from './data.service';

@Component({
  selector: 'app-row',
  templateUrl: './row.component.html',
  styleUrls: ['./app.component.css']
})

export class RowComponent implements OnInit {

  data: any = [];

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.dataService.getAllesVanDeclaraties(2).subscribe( data => {
      console.log(data);
      this.data.push(data);
    });
  }
}

我已尝试制作嵌套的http请求，但我没有得到任何回复。

Answer 1

尝试这样：

Observable.forkJoin([
    this.http.get('http://localhost:8080/declaraties/' + id),
    this.http.get('http://localhost:8080/declaraties/' + id + '/gebruiker'),
    this.http.get('http://localhost:8080/declaraties/' + id + '/categorie')
])
.subscribe((data: any) => {
    console.log('data[0]', data[0].json())
    console.log('data[1]', data[1].json())
    console.log('data[2]', data[2].json())
})

Answer 2

我首先得到所有声明：

this.http.get('http://localhost:8080/declaraties/').map(res =>{ 
  const declaraties: any[] = res.json();
  for(let i = 0; i < declaraties.length; i++){
    this.http.get('http://localhost:8080/declaraties/' + declaraties[i].id + '/gebruiker')
             .map(gebruiker =>{ declaraties[i].gebruiker = gebruiker.json(); })      
    this.http.get('http://localhost:8080/declaraties/' + declaraties[i].id + '/categorie')
             .map(categorie=>{ declaraties[i].categorie = categorie.json(); })
  }
  return declaraties;
})

Answer 3

您可以创建一个可以处理id数组的包装器方法。此方法可以调用当前的getAllesVanDeclaraties方法为每个id构建http请求

// data.service.ts
getAllesArray(ids: number[]){
    // build out array of observables
    let declarations = ids.map(id => this.getAllesVanDeclaraties(id));

    // call observables in parallel
    return Observable.forkJoin(...declarations);
}

现在，当您在组件中订阅此内容时，您将获得多个ID的数据

// component.ts
this.getAllesArray([1, 2]).subscribe(res => {
    // res[0] is the result from id = 1
    // res[1] is the result from id = 2
});

嵌套HTTP调用Angular 4

3 个答案: