Question

我有3个问题串联运行。我试图更多地了解服务/组件，所以我想做一个非常基本的GET请求。

我的steam.service.ts：

    import { Injectable } from '@angular/core';
    import { Http, Response, RequestOptions  } from '@angular/http';
    import { Observable } from 'rxjs/Rx';

    import { Steam } from './steam'

    @Injectable()
    export class SteamService {
        private steamUrl = "http://api.steampowered.com/IPlayerService/GetRecentlyPlayedGames/v0001/?key={redacted}&steamids={redacted2}";

      constructor(
          private http: Http
      ) {}

      getGames(): Observable<Game[]> {
         return this.http.get(this.steamUrl)
                    .map(response => response.json())
                    .catch(this.handleError);
      }

        private handleError (error: Response | any) {
           let errMsg: string;
            if (error instanceof Response) {
              const body = error.json() || '';
              const err = body.error || JSON.stringify(body);
              errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
            } else {
              errMsg = error.message ? error.message : error.toString();
            }
            console.error(errMsg);
            return Observable.throw(errMsg);
        }
    }

我的steam.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Rx';

import { Steam } from './steam'
import { SteamService } from './steam.service'

@Component({
    moduleId: module.id,
    selector: 'steam',
    templateUrl:'steam.component.html',
    providers: [ SteamService ]
})
export class SteamComponent implements OnInit {
    games: Game[];
    errorMessage: string;
    mode = "Observable";

  constructor(
      private steamService: SteamService
   ) {}

   getGames() {
       this.steamService.getGames()
           .subscribe(
               games => this.games = games,
               error => this.errorMessage = <any>error
           );
   }

}

我的steam.ts文件

export interface Game {
    appid: string,
    name: string,
    playtime_2weeks: number,
    playtime_forever: number,
    img_icon_url: string,
    img_logo_url: string
}

这个代码库大量反映了我完成的其他三个组件。我最初是出口游戏＆＃39;作为一个组成部分，并认为这是我的问题的一部分。当我将其更改为界面时，我得到错误 - 暂时离开。

在刷新或编译时有一个问题是SOMETIMES。它读了

ERROR in ~app/steamGames/steam"' has no exported member 'Steam'.)
/home/ubuntu/workspace/freelancedemo/src/app/steamGames/steam.component.ts (13,14): Class 'SteamComponent' incorrectly implements interface 'OnInit'.
  Property 'ngOnInit' is missing in type 'SteamComponent'.)
~/src/app/steamGames/steam.component.ts (14,12): Cannot find name 'Game'.)

ERROR in ~steamGames/steam"' has no exported member 'Steam'.)
~/steam.service.ts (15,26): Cannot find name 'Game'.)

在我看来，这个问题可能是由于我的界面被命名为“Game＆＃39 ;?将界面更改为Steam会使此错误停止，但同样会在保存/编译时随机显示无效。

我真正的问题是，从未进行过API调用 - 我已经看过“网络”标签，检查了HTML，但没有结果。 app.module.ts 从＆＃39; ./ steamGames / steam.component＆＃39;中导入{SteamComponent}; 从＆＃39; ./ steamGames / steam.service＆＃39;;

导入{SteamService}

import { AppRoutingModule } from './app-routing.module';

    @NgModule({
        imports: [
            ...
        ],
        declarations: [
            ...
            SteamComponent
        ],
        providers:[
            ...
            SteamService

我将它包含在我的路线中。

我注意到的一件事是Webpack（我特意使用Ang2CLI）没有映射TS - ＆gt; JS。我不确定如何强制这种情况发生，但我自然认为这是我的主要罪魁祸首，那你怎么强迫它正确编译？

编辑：强制AngCLI制作组件但仍然没有映射：

steam.component.js AFTER AngCLI Compiled

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var module_1 = require();
if (viewEncapsulation) {
     %  > , ViewEncapsulation <  % ;
}
 %  >  % ;
if (changeDetection) {
     %  > , ChangeDetectionStrategy <  % ;
}
 %  > ;
from;
'@angular/core';
if (inlineTemplate) {
     %  >
        template;
    "\n    <p>\n      steam Works!\n    </p>\n  ",  % ;
}
else {
     %  >
        templateUrl;
    './steam.component.html',  % ;
}
if (inlineStyle) {
     %  >
        styles;
    [] <  % ;
}
else {
     %  >
        styleUrls;
    ['./steam.component.scss'] <  % ;
}
 %  >  % ;
if (viewEncapsulation) {
     %  > ,
        encapsulation;
    ViewEncapsulation. < ;
    viewEncapsulation %  >  % ;
}
if (changeDetection) {
     %  > ,
        changeDetection;
    ChangeDetectionStrategy. < ;
    changeDetection %  >  % ;
}
 %  >
;
var default_1 = (function () {
    function default_1() {
    }
    return default_1;
}());
 %  > module_1.Component;
implements;
module_1.OnInit;
{
    constructor();
    { }
    ngOnInit();
    {
    }
}
//# sourceMappingURL=__name__.component.js.map

Answer 1

你有2个问题。

在SteamComponent中，您可以定义getGames()方法，但不要从任何地方调用它。

其次，您的SteamComponent实现了OnInit，但该界面要求您在类上使用ngOnInit方法。您的SteamComponent没有定义该方法。

ngOnInit是在Angular创建组件时调用的方法，因此您可以在此处调用getGames()方法。

Answer 2

我能够解决它，我实际上面临着多个问题。

A）编译问题：我遵循Ang-CLI here的Rails-esque生成工具。这个生成的模板＆＃39;这是我写的。但是，由于导演，我仍然有编辑问题。我必须进入file.type.js.map并修改,"sourceRoot":"",以正确反映其位置。

一旦编译完成，我的问题就解决了

B）NgOnInit Warning - 虽然这个警告在产生它的时候也是不稳定的但是它是正确的 - 我从来没有使用它，只是实现了它。添加

ngOnInit() {
    let timer = Observable.timer(0, 5000);
    timer.subscribe(() => this.getGames());
}

解决了我的问题

C）我无法正确修复游戏＆＃39;错误。此错误仍然仅在重新加载时出现。我最后将我的界面，声明以及Game或Observable Game的所有引用重命名为Steam，它解决了我的问题。

无论如何，笑话对我来说 - Steam跟随CORS，因此仅Angular无法完成通话。

Angular2基本GET请求失败（可能是TS编译问题？）

2 个答案: