angular - 尝试过滤 Observable 但类型上不存在属性

Question

我有一个 Observable getPages() 返回一个数组，我试图过滤属性 parent 等于“id”的所有页面。但我没有进步，因为我似乎无法访问那个 parent。

Property 'parent' does not exist on type 'Page[]'

console.log(this.wordpressService.getPages());

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
  0: {id: 43, date: "2019-01-18T09:07:42", date_gmt: "2019-01-18T09:07:42", guid: {…}, modified: "2019-01-18T09:17:16", …}
  1: {id: 28, date: "2019-01-14T20:46:39", date_gmt: "2019-01-14T20:46:39", guid: {…}, modified: "2019-01-16T12:19:20", …}
  2: {id: 25, date: "2019-01-14T20:45:59", date_gmt: "2019-01-14T20:45:59", guid: {…}, modified: "2019-01-16T13:44:56", …}
  3: {id: 16, date: "2019-01-14T20:37:42", date_gmt: "2019-01-14T20:37:42", guid: {…}, modified: "2019-01-16T12:18:42", …}
  4: {id: 12, date: "2019-01-14T20:24:35", date_gmt: "2019-01-14T20:24:35", guid: {…}, modified: "2019-01-18T09:06:41", …}
  5: {id: 4, date: "2019-01-14T19:57:45", date_gmt: "2019-01-14T19:57:45", guid: {…}, modified: "2019-01-16T12:19:13", …}
  length: 6
  __proto__: Array(0)

page-detail.component.ts(摘录)

export class PageDetailComponent implements OnInit {
  pageId: Number;
  filteredPage = [];

  constructor(private route: ActivatedRoute, private wordpressService: WordpressService) {}

 this.wordpressService.getPages()
  .pipe(filter(page => page.parent === this.pageId))
  .subscribe(page => this.filteredPage = page);
}

wordpress.service.ts(节选)

import {HttpClient} from '@angular/common/http';
import {Page} from './page';

constructor(private http: HttpClient) {}

getPages(): Observable<Page[]> {
  return this.http.get<Page[]>(`${this.API}/pages`);
}

page.ts 接口(interface)(节选)

export interface Page {
  id: number;
  date: string;
  date_gmt: string;
  guid: GUID;
  modified: string;
  modified_gmt: string;
  ...
  parent: number;
}

我想以一个包含所有页面过滤结果的新数组结束。但我只是得到未定义或什么都没有，我假设这是因为这个 page.parent。尝试学习 rxjs 我似乎无法弄清楚如何做到这一点。

Answer 1

您需要添加 map 运算符。您遇到的表单错误我可以得出结论，您正在遍历整个对象。

this.wordpressService.getPages()
  .pipe(map(pages => pages.filter((page) => page.parent === this.pageId)))
  .subscribe(page => this.filteredPage = page);

希望对你有帮助