时间戳

首页 > 解决方案 > Angular 6 rxjs 过滤器从 Observable 中删除所有条目

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

问题描述

我正在通过 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什么都不返回/空

我检查了 100 倍，我的urlvar 确实与linkJSON 文件中的一项的字符串匹配。

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

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

编辑：

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

}

标签： angularfilterrxjs

解决方案

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

}

推荐阅读