angular2 + ngrx 的过滤器数组答案

【问题标题】：Filter array for angular2 + ngrxangular2 + ngrx 的过滤器数组
【发布时间】：2017-04-18 04:07:47
【问题描述】：

我正在尝试在 angular+ngrx 应用程序中使用此过滤器：

fetchById(id: number): Document {

return this.store.select( s => s.documents ).filter( obj => obj.id == id )[0]

 }

documents 是Documents 的数组，后者有一个id 属性。这个想法是过滤数组以选择一个文档。但是，我收到此错误消息：

类型Document[] 上不存在属性id。我不明白这个消息，因为obj 是数组的一个元素，因此是一个具有 id 属性的对象。关于这里有什么问题的任何想法？谢谢！

【问题讨论】：

标签： arrays angular filter redux

【解决方案1】：

让我们分解操作以了解发生了什么......

fetchById(id: number): Observable<Document> {
  const documents: Observable<Document[]> = this.store.select(s => s.documents);
  const filtered: Observable<Document[]> = documents.filter((obj: Document[]) => obj.id == id );
  const result: Observable<Document> = filtered.first();
  return result;
}

请注意，Observable#filter() 的回调采用数组，而不是单个项目。这与Array#filter() 和错误消息的原因不同。另外，请注意我无法使用[0] 从可观察对象中检索第一项，请改用first()。然后我将返回类型更改为返回一个 observable。

然而，它不起作用。当我们考虑从 observable 中过滤一个数组时，可能我们想使用Observable#map() 来生成另一个具有单个元素的数组。

fetchById(id: number): Observable<Document> {
  return this.store
    .select(s => s.documents)
    .map(list => obj.find(obj => obj.id === id));
    .first();
}

如果我们想返回 observable 的最后一个值，我们可以这样做：

fetchById(id: number): Document | null {
  let result: Document | null = null;
  this.store
    .select(s => s.documents)
    .map(list => obj.find(obj => obj.id === id) || null);
    .first()
    .subscribe(item => result = item);
  return result;
}

我使用| null 键入它，因为带有指定id 的文档可能不存在。

【讨论】：