javascript - Angular2 服务迭代

标签 javascript angular typescript

我需要从 JSON API 获取数组,然后迭代它。我仍然不明白它是如何工作的。谢谢您的帮助。

这就是我的服务的样子。

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

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

    constructor(private http: Http){
        this.roster = [];
    }


    getPlayer(id) {
       for (let player of this.roster) {
            console.log(player["id"]);
        }   
    }


    getRoster(season,category) {
        this.roster.push(this.http.get("http://API JSON LIST OF ID")
            .map(res => res.json()));
    }

}

interface Roster {
    id:number
}

这就是我的称呼

ngOnInit() {
   this.getRoster();
   this.getPlayers();
}

请问哪里失败了?

最佳答案

这应该可以满足您的要求:

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

    constructor(private http: Http){
        this.roster = [];
    }

    getPlayer(id) {
       for (let player of this.roster) {
            console.log(player["id"]);
        }   
    }

    getRoster(season,category) {
        return this.http.get("http://API JSON LIST OF ID")
       .map(res => res.json())
       .do(val => this.roster.push(val));  // the do operator should be used for side effects (eg modifying an existing array)
    }
}
ngOnInit() {
   this.playerService.getRoster().subscribe(val => this.playerService.getPlayer());
}

关于javascript - Angular2 服务迭代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43077011/

相关文章:

typescript - TypeORM+nestjs : How to serialize+CRUD child entity classes using parent generics, 具有单个 Controller 、存储库、子类型验证?

javascript - 获取 url 的 Angular 变化

javascript - 使用 JS 在源代码中搜索内容的首选方式是什么?

javascript - 使用 cdkDropList 时元素样式不适用( Angular cdk 拖放)

具有 Moment 日期格式的 Angular 6 matDatepicker

javascript - 在 Angular 应用程序中构建保存多个筛选器选择的值的 API 调用

angular - *ng如果检查数组为空则显示消息

javascript单选按钮返回先前检查的值

javascript - 无法在 Firebase 上使用 foreach 方法获取数据

javascript - 网络上的 Firestore 是否对两个听众收取两次读取费用?