如何使用rxjs在本地json文件上创建HTTP get()？

Question

我正在尝试使用Ionic typescript向本地JSON文件发出请求，并检索JSON文件中的所有游戏对象。这是我到目前为止所知道的：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators/map';
import { catchError } from 'rxjs/operators/catchError';
import { Observable } from "rxjs/Observable";
import { Game } from "../../models/Game";

import { Http, Response, RequestOptions, Headers } from '@angular/http';

/*
  Generated class for the GamesProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/
@Injectable()
export class GamesProvider {
  constructor(public http: HttpClient) {

  }

  public getGames(): Observable<Array<Game>> {

      return this.http.get('/assets/games.json').pipe(
        map((res: Response) => res.json().games),
        catchError(this.handleError)
      );
  }

  public handleError(error: any) {
      // log error
      // could be something more sofisticated
      let errorMsg = error.message || `Yikes! There was a problem with our hyperdrive device and we couldn't retrieve your data!`
      console.error(errorMsg);

      // throw an application level error
      return Observable.throw(errorMsg);
  }
}

当我调用getGames()函数时，我得到了如下所示的结果：

operator
    :CatchOperator {caught: Observable, selector: ƒ}
    source
    :Observable {_isScalar: false, source: Observable, operator: MapOperator}
    _isScalar
    :false
    __proto__
    :Object

我所期望的是一个可观察到的游戏对象数组。

Game.ts：

export class Game {
    gameid: number
    genres: string
    images: string
    name: string
    developer: string
    publisher: string
    date: string
    description: string
    players: number
}

这是我的JSON文件的样子：

{
    "games":[
  {
    "Id": 1,
    "name": "007: GoldenEye",
    "genres": "Action/First-Person Shooter",
    "date": "25-Aug-97",
    "images": "007: GoldenEye.png",
    "developer": "Rare",
    "publisher": "Nintendo",
    "description": "A video game released for the Nintendo 64.",
    "players": 4
  },
  {
    "Id": 2,
    "name": "007: The World Is Not Enough",
    "genres": "Action/First-Person Shooter",
    "date": "1-Nov-00",
    "images": "007: The World Is Not Enough.png",
    "developer": "Eurocom",
    "publisher": "Electronic Arts",
    "description": "A video game released for the Nintendo 64.",
    "players": 4
  },
...
...
...
 ]
}

Answer 1

如果您使用HttpClient，则不应该使用json()；HttpClient上的get()方法使访问此数据变得简单：

ngOnInit(): void {
    this.http.get('/assets/games.json').subscribe(data => {
      this.games = data.games;
    },
    (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
            console.log('An error occurred:', err.error.message);
        } else {
            console.log(`Backend returned code ${err.status}, body was: ${err.error}`);
        }
    })
}

然后你可以使用：

<div *ngFor="let game of games">{{game | json}}</div>

Answer 2

我相信你需要的不是管道，而是map (去掉管道)

return this.http.get('/assets/games.json').map(
(res: Response) => res.json().games).catch(this.handleError);

查看文档：https://angular.io/guide/http您也可以使用subscribe进行订阅

Answer 3

如果您的Game类更改为

export class Game {
    id: number
    genres: string
    images: string
    name: string
    developer: string
    publisher: string
    date: string
    description: string
    players: number
}

您可以将http.get的输出转换为您的游戏类：

return this.http.get('/assets/games.json').map(
(res: Response) => <Game>res.json().games).catch(this.handleError);

为了处理错误，可以使用此方法

protected handleError(error: any): Observable<any> {
    console.log(error.message || error);
    const response = 'some error occurred!';
    return Observable.of(response);
  }