Фильтр 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 ничего не возвращает / ноль

Я проверил 100x, мой url var действительно соответствует строке link для одного из элементов в файле JSON.

и из моего файла ./page.ts:

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

Edit:

Этот код только что дал результат, который я искал. Однако я не понимаю, почему удаление <Page> из Observable сделало иначе. Если кто-то сможет мне это объяснить, это будет очень ценно!

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

Функция filter в Observable предназначена для фильтрации потока событий, т. Е. Сколько раз выполняется функция .subscribe.

Звучит так, будто вы хотите отфильтровать излучаемое значение. Для этого вам нужно будет использовать что-то вроде .map вместе с функцией array.filter

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

Answer 2

Поскольку наблюдаемое ведет себя как асинхронный элемент управления, вы не можете вернуть данные до того, как наблюдаемая подписка будет подписана.Лучший способ сделать это - вместо того, чтобы возвращать данные, вы можете назначить страницы в переменную и связать ее с шаблоном

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

}