Angular 6 rxjs 过滤器从 Observable 中删除所有条目

Question

我正在通过JSON文件加载一组外部页面数据。当单独放置时，我的可观察对象会按预期返回 4 个项目：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Page }   from './page';
import { filter } from 'rxjs/operators';
pagesUrl  = 'http://localhost:4200/assets/pages.json';
constructor(private http: HttpClient) { }
getPage(slug): Observable<Page> {
var pages = this.http.get<Page>(this.pagesUrl);
return pages;
}

pages为我的组件提供了 4 页的所有数据。

但是，当我尝试将pages过滤到具有特定 url 的项目时，我最终一无所获：

getPage(slug): Observable<Page> {
var url   = this.site + slug + "/";
var pages = this.http.get<Page>(this.pagesUrl);
const data = pages.pipe(
filter(page => page.link == url)
);
const subscribe = pages.subscribe(p => console.log(p));
return data;
}

data不返回任何内容/空

值我已经检查了 100x，我的urlvar 确实与 JSON 文件中某个项目的link字符串匹配。

从我的 ./page.ts 文件中：

export interface Page {
id: number,
link: string
}

编辑：

这段代码刚刚产生了我想要的结果。但是，我不明白为什么从可观察对象中删除<Page>会有所不同。如果有人能向我解释这一点，将不胜感激！

getPage(slug): Observable<any> {
var url   = this.site + slug + "/";
var pages = this.http.get<any>(this.pagesUrl);
const data = pages.pipe(
map(pages => pages.filter((page) => page.link == url))
);
const subscribe = pages.subscribe(p => console.log(p));
return data;
}

Answer 1

由于可观察量表现为异步控件，因此无法在可观察订阅之前返回数据。最好的方法是，不是返回数据，而是可以将页面分配到变量中并将其绑定到模板中

data: Page[] = []
getPage(slug): void {
var url = this.site + slug + "/";
var pages = this.http.get < Page > (this.pagesUrl);
pages.pipe(
filter(page => page.link == url)
);
pages.subscribe(p => {
this.data = p;
console.log(this.data)
});
}

Answer 2

Observable上的filter函数用于过滤事件流，即过滤.subscribe函数的执行次数。

听起来您想过滤发出的值。为此，您需要使用类似.map的东西以及array.filter函数

const data = pages.pipe(
map(pages => pages.filter((page) => page.link == url))
);