Javascript 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>   

我的组件是这样的：

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>   

模板如下所示：

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>   

---

这里有很多错误：

• 首先，http调用是异步的，因此在它们完成之前，您无法访问它们计算的值

• 如果没有

  .subscribe（）

  ，那么

  可观察的
  将不起任何作用
  

• 在处理服务中的可观察对象时，不应该依赖于状态，这会适得其反

播放服务： 名册：

---

您的问题是什么？此.players为空。带有*ngFor=“let player of players”的输出仍然为空：-O我不明白为什么。它看起来很棒。你必须编辑你的问题，告诉什么是预期的行为，并创建一个清晰的可复制的示例，带有模板代码、组件等。没有这些信息，任何人都无法帮助你。我在我的帖子中添加了示例。这是因为在你的模板中，应该是

player.hrac.jmeno

而不是

player['jmeno']

（多么奇怪的语言）但如果我是你，我会去掉服务中所有无用的数组。。。