HTTP请求不会关闭

我是Angluar的新手，并且正在关注视频教程以制作HTTP请求并获取响应数据。出于某种原因，我使用的代码不会触发http.get。HTTP请求不会关闭

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

@Injectable() 
export class AppComponent { 

    constructor(private http: Http){ 
    console.log('Until here works'); 
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(data => { 
     console.log('Finished'); 
     console.log(data); 
    }); 
    } 

}

来源

2017-04-01 Red Virus

有你在浏览器中查看控制台日志？ – Djamware

@Djamware是的，没有错误 –

更新您的组件和模块代码。你希望你的AppComponent可以同时作为Component和Injectable – Aravind

我们使用服务来减少代码行数量和开发时间。

使采用了棱角分明-CLI命令ng g s Get 一个单独的服务，这将使得新服务you.but你需要将其添加在这样app.module.ts提供商。

，或者如果你没有使用纤维环，CLI使文件get.service.ts文件，请按照下列步骤

入住此示例应用程序，我做。

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { GetService } from './get.service'; 

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

中get.service.ts

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 
@Injectable() 
export class GetService { 

    constructor(private http: Http) { } 
    getData() { 
    this.http.get('https://jsonplaceholder.typicode.com/posts').map(m => m.json() 
    ).subscribe(k => { console.log(k) }); // we have to subscribe for get data out 
    } 
}

app.component.ts应该是这样的添加这些代码。

import { Component,Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

import { GetService } from './get.service'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title = 'app works!'; 
    constructor(private _service : GetService){ 
    this._service.getData(); 
    } 
}

阅读更多关于服务here

来源

2017-04-01 04:01:31 IsuruAb

这是从文档：

的http.get不发送请求，只是还没有。这个Observable是冷的，这意味着请求不会熄灭，直到某些订阅了Observable。

见及此链接以获取更多信息的详细示例：https://angular.io/docs/ts/latest/guide/server-communication.html

这里是一个具体的例子：

getProducts(): Observable<IProduct[]> { 
    return this._http.get(this._productUrl) 
     .map((response: Response) => <IProduct[]> response.json()) 
     .do(data => console.log('All: ' + JSON.stringify(data))) 
     .catch(this.handleError); 
}

然后订阅它像这样：

ngOnInit(): void { 
    this._productService.getProducts() 
      .subscribe(products => this.products = products, 
         error => this.errorMessage = <any>error); 
}

来源

2017-04-01 03:02:40 DeborahK

你必须要使用的服务，而不是直接在组件中使用它作为服务是指采用了棱角分明的依赖注入受到重用。如果你是新的，我建议你一次通过服务，因为这些是角度应用程序的组成部分。

我有一个处理一些基本的角度概念和服务的回购是其中之一请检查出希望它有帮助，我也有相同的gh页面的生活的例子。

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts

来源

2017-04-01 06:51:13

HTTP请求不会关闭

回答

相关问题