{% raw %} # 帶有 RxJS `Observable`的 Angular `HttpClient`示例 > 原文： [https://howtodoinjava.com/angular/rxjs-observable-httpclient/](https://howtodoinjava.com/angular/rxjs-observable-httpclient/) 了解如何使用 Angular `HttpClient`服務從在線 REST API 獲取數據，并將其作為`Observable`對象/數組返回。 在發生任何數據事件時，`observable`的訂戶將做出反應。 ```java Table of Contents HTTPClient Setup Create service which return Observable Create observer which subscribe to Observable View HTML Template Demo ``` ## `HTTPClient`設置 要使用`HTTPClient`服務，您需要執行兩個步驟： 1. #### 在根模塊中導入`HttpClientModule` 從`@angular/common/http`包中導入`HttpClientModule`模塊，并將其條目添加到`@NgModule`的`imports`屬性中。 ```java import { BrowserModule } from '@angular/platform-browser'; import { HttpClientModule } from '@angular/common/http'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } ``` 2. #### 在服務構造器中注入`HttpClient` 現在，在開始使用它時，在服務代碼中注入實際的`HttpClient`服務。 ```java import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class EmployeeService { constructor(private http: HttpClient) { } } ``` ## 創建返回`Observable`的服務 我們將使用通過 [REST 模擬服務器](https://howtodoinjava.com/angular/mock-rest-server/)創建的 REST API。 讓我們編輯員工服務類別的代碼，并從中返回`Observable`。 ```java import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Employee } from '../model/employee'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class EmployeeService { constructor(private http: HttpClient) { } public getEmployees(): Observable<Employee[]> { const url = 'http://localhost:3000/employees'; return this.http.get<Employee[]>(url); } } ``` 上面的代碼點擊 REST API `"/employees"`并獲取`employee`數組。 然后，它返回`employee`數組作為可觀察的集合。 任何方法都可以訂閱它來監聽此數組上的數據事件。 僅供參考，`Employee`是用于存儲數據的模型類。 ```java export class Employee { public id: number; public name: string; public status: string; constructor(id:number, name:string, status:string) { this.id = id; this.name = name; this.status = status; } } ``` ## 創建訂閱了`Observable`的觀察者 我們將在組件文件中創建訂戶。 它將從可觀察數組中讀取數據并分配給模型屬性。 模型屬性可用于映射來自 UI 的數據。 ```java import { Component } from '@angular/core'; import { EmployeeService } from './service/employee.service'; import { Employee } from './model/employee'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; employees = new Array<Employee>(); constructor( empService:EmployeeService ) { empService.getEmployees().subscribe(response => { this.employees = response.map(item => { return new Employee( item.id, item.name, item.status ); }); }); } } ``` ## 查看 HTML 模板 是時候更新視圖 HTML 了，該 HTML 將盡快提供`employee`數組數據。 ```java <h1> Angular HTTP Service Example </h1> <table border="1" style="width: 33%"> <tr> <th>Id</th> <th>Name</th> <th>Status</th> </tr> <tr *ngFor="let emp of employees"> <td>{{ emp.id }}</td> <td>{{ emp.name }}</td> <td>{{ emp.status }}</td> </tr> </table> ``` ## 演示 要測試以上編寫的代碼，您將啟動模擬 REST 服務器以及 angular 應用。 1. 使用此命令啟動模擬服務器。 ```java $ json-server --watch 'E:\ngexamples\db.json' ``` 2. 使用命令啟動 Angular 應用。 ```java $ ng serve ``` 在瀏覽器中檢查應用。  帶有 RxJS `Observable`的 Angular `HttpClient`示例 將您的評論放在源代碼中。 學習愉快！ [源碼下載](https://howtodoinjava.com/wp-content/downloads/Angular2%20Http%20Service%20Example.zip) {% endraw %}