Angular 4-Httpサービス

Httpサービスは、外部データの取得、投稿などに役立ちます。 httpサービスを利用するには、httpモジュールをインポートする必要があります。 httpサービスを利用する方法を理解するための例を考えてみましょう。

httpサービスの使用を開始するには、以下に示すように app.module.ts にモジュールをインポートする必要があります-

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

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

強調表示されたコードが表示されている場合、@ angular/httpからHttpModuleをインポートしました。インポート配列にも同じものが追加されています。

*app.component.ts* でhttpサービスを使用してみましょう。

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

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

export class AppComponent {
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map((response) ⇒ response.json()).
      subscribe((data) ⇒ console.log(data))
   }
}

上で強調表示されているコードを理解しましょう。次のように行われているサービスを利用するためにhttpをインポートする必要があります-

import { Http } from '@angular/http';

クラス AppComponent では、コンストラクターが作成され、Http型のプライベート変数httpが作成されます。データを取得するには、httpで利用可能な get API を次のように使用する必要があります

this.http.get();

コードに示されているように、パラメーターとしてURLを取得する必要があります。

テストURL-https://jsonplaceholder.typicode.com/usersを使用して、jsonデータを取得します。フェッチされたurlデータマップで2つの操作が実行され、サブスクライブされます。 Mapメソッドは、データをJSON形式に変換するのに役立ちます。マップを使用するには、以下に示すように同じものをインポートする必要があります-

import 'rxjs/add/operator/map';

マップが完了すると、サブスクライブはブラウザに表示されるようにコンソールに出力を記録します-

マップのコンソール出力

表示される場合、jsonオブジェクトがコンソールに表示されます。オブジェクトはブラウザにも表示できます。

ブラウザに表示されるオブジェクトについて、 app.componentl と app.component.ts のコードを次のように更新します-

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: Http) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      map(
         (response) ⇒ response.json()
      ).
      subscribe(
         (data) ⇒ {this.displaydata(data);}
      )
   }
   displaydata(data) {this.httpdata = data;}
}

*app.component.ts* では、subscribeメソッドを使用して、表示データメソッドを呼び出し、取得したデータをパラメーターとして渡します。

表示データメソッドでは、データを変数httpdataに格納します。データは、このhttpdata変数に対して for を使用してブラウザに表示されます。これは app.componentl ファイルで行われます。

<ul *ngFor = "let data of httpdata">
   <li>Name : {{data.name}} Address: {{data.address.city}}</li>
</ul>

jsonオブジェクトは次のとおりです-

{
   "id": 1,
   "name": "Leanne Graham",
   "username": "Bret",
   "email": "[email protected]",

   "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
         "lat": "-37.3159",
         "lng": "81.1496"
      }
   },

   "phone": "1-770-736-8031 x56442",
   "website": "hildegard.org",
   "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
   }
}

オブジェクトには、id、name、username、email、addressなどのプロパティがあり、内部にはstreet、cityなどがあります。電話、ウェブサイト、会社に関するその他の詳細。 for ループを使用して、 app.componentl ファイルに示すように、名前と都市の詳細をブラウザーに表示します。

これは、ディスプレイがブラウザに表示される方法です-

For-Loop Name City Detailsの使用

ここで、特定のデータに基づいてフィルタリングする検索パラメーターを追加しましょう。渡された検索パラメーターに基づいてデータを取得する必要があります。

*app.componentl* および *app.component.ts* ファイルで行われた変更は次のとおりです-

app.component.ts

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

@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   searchparam = 2;
   jsondata;
   name;
   constructor(private http: Http) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam).
      map(
         (response) ⇒ response.json()
      ).
      subscribe((data) ⇒ this.converttoarray(data))
   }
   converttoarray(data) {
      console.log(data);
      this.name = data[0].name;
   }
}

*get api* の場合、検索パラメーターid = this.searchparamを追加します。 searchparamは2です。 jsonファイルの *id = 2* の詳細が必要です。

app.componentl

{{name}}

これは、ブラウザが表示される方法です-

エルヴィン・ハウエル

httpから受信したデータをブラウザでコンソールしました。同じことがブラウザコンソールに表示されます。 id = 2 のjsonからの名前がブラウザーに表示されます。

Angular4-http-service

Angular 4-Httpサービス

app.component.ts

app.componentl