Angular 2 个 GET 请求

Question

我在Angular2方面非常无能。我已经使用了一段时间，唯一能开始工作的是我从教程视频中复制和粘贴。

话虽如此，我正在创建一个 REST api (Node.js, expressJS, angular2, mongodb)，但我在从前端到后端调用 GET 时遇到了问题。我正在尝试调用 return 游戏对象数组的端点 (/games)。我想最终使用这个数组来显示游戏，但我什至无法正常调用成功。

我正在尝试使用 all-games.component.ts 来使用服务 get-last25.service.ts 到 return 数据库中的所有游戏（最多 25 个）。我暂时关闭了此路由的 JWT 身份验证。

我收到的错误：

Unhandled Promise rejection: No provider for GetLast25Service! ; Zone: angular ; Task: Promise.then ;

和

EXCEPTION: Uncaught (in promise): Error: DI Error

和一个空错误...

=====================================

代码：

得到-last25.service.ts:

import { Injectable } from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';
import { tokenNotExpired } from 'angular2-jwt';

@Injectable()
export class GetLast25Service {

  constructor(private http:Http) { }

  getLast25(game){
    if(game == null || game == undefined){
      let headers = new Headers();
      headers.append('Content-Type','application/json');
      return this.http.get('http://localhost:3000/games',{ headers: headers })
        .map(res => res.json());

    } else {
      let headers = new Headers();
      headers.append('Content-Type','application/json');
      return this.http.get(`http://localhost:3000/games/${game}`,{ headers: headers })
        .map(res => res.json());
    }
  }


}

全部-games.component.ts:

import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router, Params } from '@angular/router';
//import {FlashMessagesService} from 'angular2-flash-messages';
import { AuthService } from '../../services/auth.service';
import { GetLast25Service } from '../../services/get-last25.service';


@Component({
  selector: 'app-all-games',
  templateUrl: './all-games.component.html',
  styleUrls: ['./all-games.component.css']
})
export class AllGamesComponent implements OnInit {

  private games: any[];
  private comments: any;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private authService: AuthService,
    //private flashMessage: FlashMessagesService,
    private getLast25Service: GetLast25Service

  ) { }

  ngOnInit() {
    this.getLast25Service.getLast25(null).subscribe(games => {

      this.games = games;
    },
    err => {
      return false;
    });

  }

}

每当我调用 get(http://localhost:3000/games) 时，它 returns:

[
  {
    "_id": "58e87513fbcdca1f54b4a84c",
    "name": "League of Legends",
    "game_endpoint": "lol",
    "release_date": "2012-04-23T18:25:43.511Z",
    "image_path": "../assets/images/lol.png",
    "__v": 0,
    "posts": 0,
    "subscribers": 0,
    "categories": [
      "MOBA",
      "strategy",
      "multiplayer",
      "Dota ripoff"
    ]
  },
  {
    "_id": "58e8823b8da3fa1e6c8f0885",
    "name": "Rocket League",
    "game_endpoint": "rl",
    "release_date": "2012-04-23T18:25:43.511Z",
    "image_path": "../assets/images/rocketleague.png",
    "__v": 0,
    "posts": 0,
    "subscribers": 0,
    "categories": [
      "cars",
      "racing",
      "soccer",
      "chat_disabled"
    ]
  }
]

Answer 1

您需要将服务作为提供者添加到模块中，

@NgModule({
 providers: [
    GetLast25Service
]
})

Angular 2 个 GET 请求

Angular 2 GET request

node.js

angular-promise

angular