通过订阅Angular中的服务方法来读取json数据

Question

我已经完成了其他类似的主题，但对我来说没有任何效果。

Players.service.ts

 constructor(private http: Http) {
    }

     getJSON(): Observable<any> {
        return this.http.get('../../assets/players.json')
            .map((res: any) =>  this.players = res.json() )
            .catch((error: any) => Observable.throw( 'error', error));
    }

Player.component.ts

ngOnInit() {
    this.playersService.getJSON().subscribe((players: any[]) => {
    this.players = players; console.log('players ', this.players);
},
     error => console.log(error)
    );
  }

Player.component.html

<app-player-item *ngFor="let player of players"
</app-player-item>

和players.JSON

{
    "players": [
        {
            "name": "xxxx",
            "surname": "xxxxx",
            "city": "xxxxx",
            "ranking": "12",
            "email": "[email protected]",
            "photo": "assets/images/sk.jpg"
        },
        {
            "name": "Sultan Mehmed",
            "level": "Advanced",
            "victories": "18",
            "goalsScored": "23",
            "gamesPlayed": "29",
            "email": "[email protected]",
            "photo": "assets/images/sm.jpg"
        },
         {....}
         ]
}

应该工作，但我得到一个错误：

• '错误：无法找到'object'类型的不同支持对象'[object Object]'。 NgFor仅支持绑定到Iterables，例如 阵列“。
• 未捕获（承诺）：TypeError：无法读取未定义的属性'unsubscribe'TypeError：无法读取undefined的属性'unsubscribe'

Answer 1

问题出在你的服务getJson()，this.players = res.json()而不是res.json

你的另一个问题是ngFor只适用于数组，因此要么在你的JSON文件中使它成为一个实际的数组，要么在你的逻辑中正确定义数组。

S.I.

getJSON(): Observable<any> {
        return this.http.get('../../assets/players.json')
            .map((res: any) => res.json() )
            .map(json => this.players = json['players'])
            .catch((error: any) => Observable.throw( 'error', error));

基本上第一个映射将你的json转换为json对象，第二个映射获取json并从你的json文件中获取players键下的值并将其映射到你的变量this.players