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

Question

我正在通过 JSON 文件加载一组外部页面数据。单独放置时，我的 Observable 会按预期返回 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 不返回任何内容/null

我检查了 100 倍，我的 url 变量确实与 JSON 文件中的一项的 link 字符串匹配。

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

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

编辑：

这段代码刚刚产生了我正在寻找的结果。但是，我不明白为什么从 Observable 中删除 <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

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

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))
);