HTTPリクエストが起動しない

Question

私はAngluarを初めて使い、HTTPリクエストを作成して応答データを取得するためのビデオチュートリアルに従っています。何らかの理由で、私が使ったコードはhttp.getを起動しません。

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); 
    }); 
    } 

} 

Answer 1

私たちはサービスを使用して、コード行数と開発時間を最小限に抑えます。

angle-cliコマンドを使用して別のサービスを作成しますng g s Get これは新しいサービスを作成しますが、このようにapp.module.tsのプロバイダとして追加する必要があります。

か、anular-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 { } 

は

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は、このようにする必要がありget.service.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

Answer 2

これはドキュメントからです：

http.getはまだ要求を送信しません。 Observable 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); 
} 

Answer 3

についての詳細を読みます。 あなたが新しいのであれば、これは角形アプリケーションの不可欠な部分であるため、サービスを一度やり直すことをお勧めします。

いくつかの基本的な角概念を扱ったレポがありますし、サービスもその1つです。助けてくれることを祈ってください。私はghページでも同じような人生を持っています。

https://github.com/rahulrsingh09/AngularConcepts

https://rahulrsingh09.github.io/AngularConcepts