{% 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

    ```

在浏览器中检查应用。

![Angular HttpClient with RxJS Observable Example](img/ae44f6a8646fdb48d982c081e9870d4a.png)

带有 RxJS `Observable`的 Angular `HttpClient`示例


将您的评论放在源代码中。

学习愉快！

[源码下载](https://howtodoinjava.com/wp-content/downloads/Angular2%20Http%20Service%20Example.zip)

{% endraw %}