Angular 2 GET请求

时间:2017-04-08 17:16:49

标签: node.js angular angular-promise

我在Angular 2中非常不称职。我已经使用了一段时间了,我唯一可以开始工作的是当我从教程视频中复制和粘贴时。

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

我尝试使用all-games.component.ts来使用服务get-last25.service.ts从数据库中返回所有游戏(最多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)时,它都会返回:

[
  {
    "_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"
    ]
  }
]

1 个答案:

答案 0 :(得分:1)

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

@NgModule({
 providers: [
    GetLast25Service
]
})