Question

我有一个简单的JSON文件，该文件以以下格式返回对象数组：

.Metadata.DependentToPrincipal.SetPropertyAccessMode(PropertyAccessMode.Field)

我正在访问以下提供的服务：

[
    {
        "id": 1,
        "url": "file/abc.txt"
    },
    {
        "id": 2,
        "url": "file/def.txt"
    }
]

它没有任何作用。但是，如果我改用mergeMap，它就可以正常工作。

this.http.get("json-url")
.map((response) => response.json())
.filter((file) => file.id === 1)

我之前使用过 map 运算符，它可以正常工作。但是，它在这里不起作用。如果使用 map 运算符时我有误操作，请告诉我。

请注意-我使用的是角度6。

Answer 1

在这里重要的是this.http.get("json-url")返回一个可观察值。除非您订阅，否则它不会执行。您必须订阅才能发送请求。

this.http.get("json-url") .map((response) => response.json()) .filter((file) => file.id === 1) .subscribe(theResultAfterMapAndFilter => console.log(theResultAfterMapAndFilter));

mergeMap工作的原因是它订阅了内部可观察的源（如果我没记错的话）。

Answer 2

如果您正在运行Angular 6，则实际上建议使用NULL，因为HttpClient已过时。现在，由于您将使用Http，因此无需在HttpClient上调用.json方法，因为response会隐式地处理此问题。

此外，由于Angular 6使用Rxjs 5.5或更高版本，因此您无法将HttpClient和map之类的运算符直接链接到pipe。您必须在Observable值上调用pipe函数，并添加要用Observable分隔的运算符列表。

在这里，我要返回import { HttpClient } from '@angular/common/http'; import { map, filter } from 'rxjs/operators'; ... constructor(private http: HttpClient) {} ... return this.http.get("json-url") .pipe(filter((file) => file.id === 1));，以便可以从调用包装了这段代码的函数的地方Observable到它。

要确保subscribe正常运行，还必须在HttpClient文件中导入HttpClientModule并将其添加到@NgModule数组中。

Answer 3

对于map为何不起作用，我有一个答案，但是我不确定mergeMap为何起作用。从response.json()返回的对象是任何列表。因此filter应该处理完整列表。不是列表的各个元素。该列表不具有id的属性，因此没有匹配项。即使filter中的参数称为file，也应为files。我相信以下将适用于地图：

this.http.get("json-url")
.map((response) => response.json())
.filter((files) => files.filter((file)->file.id === 1));

但是，您会得到一个列表。如果您确实想要一个文件，则可以添加另一个地图：

this.http.get("json-url")
.map((response) => response.json())
.filter((files) => files.filter((file)->file.id === 1))
.map(files=> files[0]);

话虽如此，我认为mergeMap起作用的原因可能是rxjs的一些较老的古怪之处。我未经证实的猜测是，mergeMap将匿名函数返回的列表转换为可观察的列表。这似乎有点可疑，但有可能。较旧的rxjs API似乎试图使事情正常进行，即使它可能不应该这样做。

角度地图或mergeMap

3 个答案: