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請求不會關閉

回答

相關問題