Rxjs 管道不适用于 angular 的 Http.get()

Question

我有一个 Angular 4 组件调用服务来获取数据。不是最奇怪的情况。在我检索数据并需要对其进行转换和过滤之后。显然现在这样做的方法是使用管道。

在我的组件中：

ngOnInit(): void {
    this.suService.getShippingUnitTypes().subscribe(res => {
        console.log("Getting shipping unit types: ", res);
    });
}

为我服务：

getShippingUnitTypes(): any {
    const convertToJson = map(value => (value as any).json().XXETA_GRID_STATIC_LOV);
    const filterShippingUnit = filter(value => (value as any).LOV_TYPE == "SHIPPING_UNIT");

    return this.http.get(
        this.constantsService.LOOKUP_COLUMN_BATCH_URL
    ).pipe(convertToJson, filterShippingUnit);
}

该服务导入以下内容：

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers, RequestMethod } from '@angular/http';
import { Observable, pipe } from 'rxjs/Rx';
import { map, filter } from 'rxjs/operators';

调试时，代码永远不会出错，只是永远不会到达组件中的 console.log() 语句。如果我删除 .pipe() 并简单地 return Observable，代码会记录我期望的内容，而无需转换和过滤。

我对 Rxjs 和使用 Pipe 还很陌生。我显然不明白什么。

编辑以添加信息：

我是这样把水龙头放进水管里的...

pipe(tap(console.log), convertToJson, tap(console.log), filterShippingUnit, tap(console.log))

我不知道水龙头的存在，但它很有用。前两个控制台日志给了我我所期望的。第三个，紧跟在 filterShippingUnit 之后，什么都不做。它根本不记录值。甚至不为空。

convertToJson console.log 后吐出一个包含 28 个对象的数组。其中一个对象是：

{LOV_TYPE: "SHIPPING_UNIT", LOV_TAB_TYP_ITEM: Array(4)}

我希望根据 filterShippingUnit 过滤器传递该对象。

Answer 1

问题最有可能出现在这里：

const filterShippingUnit = filter(value => (value as any).LOV_TYPE == "SHIPPING_UNIT");

假设解析完JSON的响应体后，得到一个Foo类型的数组，其中Foo定义如下：

interface Foo {
 LOV_TYPE: string;
 fooProperty: string;
 fooNumber: number;
}

您正在尝试将过滤器应用于数组对象，而不是其中包含的对象。

您有两个选择：展平数组并将其值作为单个事件发出，然后将它们再次组合为一个数组，或者将数组映射到一个新数组；第二个是最简单的如下：

const filterShippingUnit = map((list: Foo[])=> list
              .filter(foo => foo.LOV_TYPE === "SHIPPING_UNIT"));

第一种方法可以实现为：

import { flatMap, toArray } from 'rxjs/operators';

return this.http.get(this.constantsService.LOOKUP_COLUMN_BATCH_URL)
    .pipe(
      flatMap(response => response.json() as Foo[])
      map(foo => foo.LOV_TYPE === "SHIPPING_UNIT") // TypeScript will infer that foo is of type Foo
      toArray
     );

由于很容易注意到您刚刚开始 angular，我建议您执行以下操作：

为来自后端的一切定义接口
使用来自 angular 的新 HttpClient API（Http 已弃用，请参阅 https://angular.io/guide/http)
我认为没有必要定义常量函数来存储您将在流中使用的操作（如您所关注的 tutorial/guide 中所建议）。如果您不显式声明参数类型，那么这样做会丢失所有类型信息。但是在这一点上不要相信我，有人说尽管 typescript 可以推断类型，但显式声明它是一个好习惯...

Rxjs 管道不适用于 angular 的 Http.get()

Rxjs pipe not working with angular´s Http.get()

angular

typescript

rxjs

angular2-http

rxjs-lettable-operators