Question

我在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"
    ]
  }
]

Answer 1

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

@NgModule({
 providers: [
    GetLast25Service
]
})

Angular 2 GET请求

1 个答案: