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过滤到具有特定网址的项目时，我一无所获：

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

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

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

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

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

2 个答案: