Question

我是angular2的新手。我对从两个API获取数据提出了疑问。从第一个获取ID和从另一个获取ID的数据并在前端打印它。

我无法理解如何从 getPlayers（）API

迭代JSON数据

迭代正在运行，但它不会打印任何数据。

我的服务如下：

import {Injectable} from '@angular/core';
import { Http } from "@angular/http";
import "rxjs/Rx";
import {Observable} from 'rxjs/Rx';



@Injectable()
export class PlayersService {
    roster:any[];
    players:any[];

    constructor(private http: Http){
    }


   getPlayers(roster) {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/hrac?filter=id,eq,";
    return Observable.combineLatest(
      ...roster["soupiska"].map(player => this.http.get(url+ player['id_hrac'])
        .map(res => res.json()))
    ).do(players=>console.log(JSON.stringify(players)));
  }

  getRoster() {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/soupiska?filter[]=kategorie,eq,MUZ&filter[]=sezona,eq,2017&order=id_polozka&page=1,10"
    return this.http.get(url)
      .map(res => res.json())
  }


}

和我的组件是这样的：

import {Component} from "@angular/core";
import {Location} from "@angular/common";
import {Page} from "../page";
import {OnInit} from '@angular/core';

import{PlayersService} from '../../services/players.service';

@Component({
    selector: 'roster-page',
    templateUrl: 'pages/roster/roster.page.html',
    styleUrls:  ['pages/roster/roster.page.css'],
    providers: [PlayersService]
})
export class RosterPage extends Page implements OnInit {

    roster:any[];
    players:any[];



    constructor(private location: Location, private playersService: PlayersService) {
        super(location);
    }

     ngOnInit() {
        this.playersService.getRoster()
        .do(roster=>this.roster=roster)
        .switchMap(roster=>this.playersService.getPlayers(roster))
        .do(players=>this.players=players)
        .subscribe();

    }



}

模板看起来像这样：

<StackLayout class="players">
    <StackLayout *ngFor="let player of players" orientation="horizontal" [nsRouterLink]="['/player']" pageTransition="slideTop" class="player-box">
        <Label text="{{player.hrac.jmeno}}" class="player-bane"></Label>   
    </StackLayout>
</StackLayout>

Answer 1

这里有很多错误：

首先，http调用是异步的，所以在完成之前你无法访问他们计算的值。
如果没有<header name="Action" scope="default" value="urn:FindNotProcessed"/>，则.subscribe()不会做任何事情。
在处理服务中的可观察者时，你不应该依赖国家，这会适得其反。

PlayerService：

Observable

RosterPage：

export class PlayersService {
  constructor(private http: Http) {}

  getPlayers(roster) {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/hrac?filter=id,eq," ;
    return Observable.combineLatest(
      ...roster[0]["soupiska"].map(player => this.http.get(url+ player['id_hrac'])
        .map(res => res.json()))
    ).do(players=>console.log(players));
  }

  getRoster() {
    let url = "http://php.esports.cz/phone_app_roman_api/api.php/soupiska?filter[]=kategorie,eq,MUZ&filter[]=sezona,eq,2017&order=id_polozka&page=1,10"
    return this.http.get(url)
      .map(res => res.json())
  }

}

Angular2 JSON返回

1 个答案:

PlayerService：

RosterPage：