Angular 6-Httpクライアント

HttpClientはAngular 6で導入され、外部データの取得、投稿などに役立ちます。 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 { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

強調表示されたコードが表示されている場合、@ angular/common/httpからHttpClientModuleをインポートしており、これもimports配列に追加されています。

*app.component.ts* でhttpクライアントを使用してみましょう。

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users").
      subscribe((data) ⇒ console.log(data))
   }
}

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

import { HttpClient } from '@angular/common/http';

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

this.http.get();

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

テストURL-https://jsonplaceholder.typicode.com/usersを使用してJSONデータを取得します。サブスクライブは、ブラウザに表示されるようにコンソールに出力を記録します-

マップのコンソール出力

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

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

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users")
      .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": "Sincere@april.biz",

   "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 { HttpClient } from '@angular/common/http';
@Component({
   selector: 'app-root',
   templateUrl: './app.componentl',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   constructor(private http: HttpClient) { }
   httpdata;
   name;
   searchparam = 2;
   ngOnInit() {
      this.http.get("http://jsonplaceholder.typicode.com/users?id="+this.searchparam)
      .subscribe((data) => this.displaydata(data));
   }
   displaydata(data) {this.httpdata = data;}
}

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

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

エルヴィン・ハウエル

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

Angular6-http-client

Angular 6-Httpクライアント

app.component.ts