Question

这是我的DataService的代码，我在其中映射我的区域：

 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 request），但我不知道怎么回事。我看了一些例子，但我似乎没有得到它。有人可以一步一步地分解吗？或者，如果不是至少指出我正确的方向？我知道我必须使用JSON.Parse并在数组中使用它，但我不确定它是否在我订阅它的位置？我不确定。请帮忙！

Answer 1

Observable表示异步数据流或随时间发送一系列项目 Http是一个请求 - 响应协议，它返回一个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[]>的实例{1}}输入。

要一次传递一个对象，您可以使用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

如何使用Angular 5

1 个答案: