如何对 HTTP GET 响应进行排序以使用 Angular 一次获取一个元素 5

Question

这是我的数据服务代码，我在其中映射我的区域：

 import { Injectable, OnInit } from '@angular/core';
    import { HttpClient, HttpParams } from "@angular/common/http"
    import { Observable } from 'rxjs/Observable';
    import { Data } from '../models/data.model'
    import { Region } from '../models/region.model';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/switchMap';



    @Injectable()
    export class DataService {
      dukeProgress: string;
      dukeCarolinas: string;
      dukeFlorida: string;
      dukeMidWest: string;


      constructor(private httpClient: HttpClient,
      ) { }

     getRegion() {
        return this.httpClient.get('http://example.com/otdcc/v1/cc/regions').map(
          (region: Region[]) => {
            const regions = region
            for (const region of regions)
              return region;
          }
        );
      }
    }

这是我订阅的组件中的代码：

  showRegions() {
    this.dataService.getRegion().subscribe(
      data => {
        console.log('this is the data:' + ' ' + data)
        this.dataSource = new MatTableDataSource<Opcenter[]>(<any>data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      err => {
        this.showSearchBox = true;
      }
    )
    this.showSearchBox = true;
  }

我希望能够对我从 GET 请求返回的响应进行排序，并一次从响应中取出一个对象，以便在另一个需要我从响应返回的数据的函数中使用它（一个 HTTP post 请求），但我不知道怎么办。我看过例子，但我似乎不明白。有人可以逐步分解吗？或者如果不是至少给我指出正确的方向？我知道我必须使用 JSON.Parse 并在数组中使用它，但我不确定它是否会在我订阅的地方？我不确定。请帮忙！

Answer 1

Observable 表示异步数据流或随时间发出一系列项目
Http 是一个请求-响应协议，它 return 是一个 observable 但与定义不同的是，它不会随着时间的推移发出值，而是你发出请求得到一个完整的响应 它不会以异步方式到达并完成 Observable 除非您发出新的请求，否则不会再次发出。

HttpClient 简化了默认的人体工程学（您不再需要映射到 json）并且现在支持键入的 return 值。

getRegion():Observable<Region[]> {
        return this.httpClient.get<Region[]>('http://example.com/otdcc/v1/cc/regions')}

Http returns 一个 observable 并且我们可以将 HttpClient.get 告诉 return response 作为区域类型当我们使用 http.get<Region[]>(...) 然后它 return 是 Observable<Region[]> 类型的实例。

要一次传递一个对象，您可以使用 forEach，它会为订阅回调中的每个数组元素执行一次提供的函数，以确保在解析订阅后调用您的方法。

修改代码

    showRegions() {
        this.dataService.getRegion().subscribe(
          data => {
              data.forEach(value=>this.myMethod(value));
            console.log('this is the data:' + ' ' + data)
            this.dataSource = new MatTableDataSource<Opcenter[]>(<any>data);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
          },
          err => {
            this.showSearchBox = true;
          }
        )
        this.showSearchBox = true;
      }

  myMethod(data:Region)
{
   console.log(data);//your logic
}

Live Demo

如何对 HTTP GET 响应进行排序以使用 Angular 一次获取一个元素 5

How to sort through HTTP GET Response to get one element at a time with Angular 5

angular-http

angular-material2

angular

angular-httpclient