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

时间:2019-01-18 12:35:40

标签: angular 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界面(摘录)

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

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

1 个答案:

答案 0 :(得分:4)

您需要添加地图运算符。我遇到表格错误,可以得出结论,您正在遍历整个对象。

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

希望有帮助