4

我有一个调用服务来获取数据的 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() 并简单地返回 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 过滤器传递该对象。

4

1 回答 1

4

问题很可能在这里：

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

假设将响应的正文解析为 JSON 后，得到一个 type 的数组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 中的新HttpClient API（不推荐使用 Http，请参阅https://angular.io/guide/http）
  • 我认为没有必要定义常量函数来存储您将在流中使用的操作（如您正在遵循的教程/指南中所建议的那样）。如果您没有明确声明参数类型，那么您会丢失所有类型信息。但是不要相信我，有人说尽管打字稿可以推断类型，但明确声明它是一种好习惯......
于 2017-12-19T15:54:05.257 回答