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

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是一个请求-响应协议(protocol)，它返回一个 observable但与定义不同的是，它不会随着时间的推移发出值，而是您发出请求以获得完整的响应它不会以异步方式到达并完成 Observable除非您提出新的请求，否则永远不会再次发出。

HttpClient简化了默认的人体工程学(您不再需要映射到 json)并且现在支持类型化的返回值。

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

Http返回 observable我们可以告诉 HttpClient.get返回 response作为区域类型 当我们使用 http.get<Region[]>(...)然后它返回 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