アンギュラRXJS

目的:この記事では、非同期Web APIリクエストを処理するために、RXJS、HTTP GETリクエスト、RXJSオブザーバブルと組み合わせてHTTPライブラリを角度で使用します.
この記事を完了する前に事前に必要な場合は、Visual Studioのコード、Node Package Manager(NPM)、ノード、角CLIを含むすべての事前に必要なツールをインストールする必要があります.
セットアップ✨

ローカルマシンでVisual Studioコードを開きます.

ファイルメニューに移動し、開いているフォルダオプションを選択します.

このエクササイズのための新しいプロジェクトを作成し、このフォルダーを選択します.

新しいプロジェクトを作成します.Ctrl + backtic (`)キーで開いた端末を実行し、NG new angle mediumコマンド

を実行します.
環境のブートストラップ✌
Visual Studioコードの

、Ctrl + backtic (`)キーキーを押すと、Open Terminalオプションを選択します.

NPMを使用して角度媒体プロジェクトを実行します.

npm start

ポートを正しく使用するには、次のポートを使用します.

npm start --port 8000 --open

HTTPモジュールを追加する
アプリのフォルダ内の

、アプリを開きます.モジュールです.tsファイル.

HistpClientModuleモジュールを@ angle/common/HTTPパッケージからインポートするファイルの先頭にimport文を追加します.

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

NgModuleデコレータのインポート配列プロパティの値にHttpClientModuleモジュールを追加することでNGModuleデコレータを更新します.

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

HTTP getメソッドを起動する
アプリのフォルダ内の

、アプリを開きます.コンポーネント.tsファイル.

@ angle/common/HTTPライブラリモジュールからhttpclientをインポートするために新しいimport文を追加します.

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

3 .新しいインポート文を追加して、RXJSライブラリモジュールからオブザーバブルメンバ(クラス)をインポートします.

import {Observable} from 'rxjs';

AppComponentクラス内で、String型のDataItemという名前の新しいプロパティを追加します.

export class AppComponent {
    dataItems2:ItemList[]=[];
}

AppComponentクラス内で、新しい空のコンストラクターを追加します.

export class AppComponent {
    dataItems2:ItemList[]=[];
    constructor() {
    }
}

6 . ItemListという名前のモデルを追加します.アプリにインポートします.コンポーネント.TSファイル

import { ItemList } from './model';
export class ItemList{
    public userId: number;
    public id: number;
    public title: string
}

7 . HttpClient型のパラメータを追加することにより、コンストラクタを更新します.

constructor(private httpclient : HttpClient) {
}

AppComponentクラス内でGetDummyAppID 2という名前の新しいメソッドを追加します.

export class AppComponent {
    dataItems2:ItemList[]=[];
    constructor(private httpclient : HttpClient) { ... }
    private getDummyApiData2() {
    }
}

9参照可能な戻り値の型を追加することによりGetDummyAppID 2メソッドシグネチャを更新します.

private getDummyApiData2() : Observable<ItemList[]> {
}

getDummyAppAtata 2メソッド内で、HttpClient private変数にGETメソッドを呼び出す結果を返します.

https://jsonplaceholder.typicode.com/posts

private getbiponIPAddress() : Observable<ItemList[]> {
    return this.httpclient.get<ItemList[]>('https://jsonplaceholder.typicode.com/posts');
}

空のコンストラクターに戻り、GetDummyAppID 2メソッドを呼び出すコードを追加します.

constructor(private httpclient : HttpClient) {
    this.getDummyApiData2()
}

12 .購読方法を呼び出すことで利用可能なデータを購読します:

constructor(private httpclient : HttpClient) {
    this.getDummyApiData2()
      .subscribe(res => {
         this.dataItems2 = res;
    });
}

13 . IPアドレス要求の結果を取得し、AppComponentクラスのDataItems 2プロパティに保存するインライン匿名関数を追加することで、サブスクリプションメソッドを更新します.

constructor(private httpclient : HttpClient) {
    this.getDummyApiData2()
      .subscribe(res => {
         this.dataItems2 = res;
    });
}

14 .あなたの最終的なアプリ.コンポーネント.TSクラスは次のようになります.👀

import {Component} from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable} from 'rxjs';
@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: './app.component.css',
})
export class AppComponent {
    dataItems2:ItemList[]=[];
constructor(private httpclient : HttpClient) {
    this.getDummyApiData2()
      .subscribe(res => {
         this.dataItems2 = res;
    });
  }
    private getDummyApiData2() : Observable<ItemList[]> {
     return this.httpclient.get<ItemList[]>('https://jsonplaceholder.typicode.com/posts');
    }
}

アナザーウェイ

ちょうどデータアクセスへのよりスマートな方法のための再構築.
アプリ.コンポーネント.TS

import { SampleService } from './sample.service';
dataItems:ItemList[]=[];
constructor(
      private sampleService:SampleService, 
      private httpclient: HttpClient) {  
        this.getDummyApiData();
    }
private getDummyApiData(){
      this.sampleService.getDataList().subscribe(data=>{
      this.dataItems=data;
})

サンプル.サービスTSファイル

getDataList():Observable<ItemList[]>{
    return this.http.get<ItemList[]('https://jsonplaceholder.typicode.com/posts');
  }

アプリ.コンポーネント.HTMLファイル

<ul>
    <li *ngFor="let item of dataItems">
        {{item.title}}
    </li> 
</ul>

HTTPレスポンスをレンダリングする
アプリのフォルダ内の

、アプリを開きます.コンポーネント.HTMLファイル.

* ngforディレクティブとテンプレート式を追加することにより、DataItems 2プロパティの反復値をレンダリングします.

<h1>Dummy App</h1>
<strong> Example List Item::</strong>
<ul>
    <li *ngFor="let item of dataItems2">
        {{item.title}}
    </li> 
</ul>

出力

Github
StackBlitz
リファレンス
Fake Online REST API for Testing and Prototyping
TypeScript
Angular CLI
Right way to make API calls