无法在Angular上获取http数据

时间:2016-12-23 20:42:30

标签: angular typescript

我是Angular的初学者,我在服务器上发出了请求http的问题。 文件中的本地请求工作正常,但不在服务器上,我不明白。

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { DataService } from './time/time.service';

@Component({
  selector: 'my-app',
  template: `
          <button (click)="displayData()">Click</button>
          <div>Time : {{ data | json }}</div>
          `,
  providers: [DataService]
})
export class AppComponent {
        data: any[];

        constructor(public dataService : DataService) { }

        displayData() {
                this.dataService.getDatas().subscribe(
                        r => this.data = r,
                );
        }
}

time.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {

        constructor(public _http: Http) { }

        getDatas() {
                //return this._http.get('/app/test.json')
                return this._http.get('http://date.jsontest.com')
                        .map(res => res.json());
        }
}

提前致谢。

编辑:我在控制台上发生错误。

Error: Error in ./AppComponent class AppComponent - inline template:1:3
caused by: [Exception... "<no message>"  nsresult: "0x805e0006 (<unknown>)"
location: "JS frame :: http://localhost:3000/node_modules/zone.js
/dist/zone.js :: scheduleTask :: line 1645"  data: no]

1 个答案:

答案 0 :(得分:-1)

您只需在类中初始化数据变量,因为您在asycn操作完成之前访问它。

flat_map

其余的都没问题。

以下是plunker export class AppComponent { private data = {}; // initialise the data here }

如果您愿意,可以使其更加友好地使用:

http://plnkr.co/edit/zv23KWlmHaDR3bYnODR1?p=preview