Question

我发誓，RxJS将成为我的死亡。我非常确定这是RxJS，Typescript或Angular实现的实际错误。这适用于the RxJS docs page（该页面上的javascript控制台用作RxJS沙箱）：

  new Rx.Observable(observer => observer.next([{
    id: 0,
    name: 'John Doe'
  }, {
    id: 1,
    name: 'Jane Smith'
  }]))
  .map(data => data.filter(item => item.name === 'John Doe'))
  .subscribe(data => console.log(data), err => console.log(err))

但完全相同的代码在我的Angular应用程序中给出了错误Property 'filter' does not exist on type '{}'.。引用data.filter部分。那时data绝对是一个数组，所以我真的无法弄清楚它为什么不这么认为。

我已经更新了应用程序正在使用的rxjs版本，但这并没有改变任何内容。任何帮助将不胜感激。如果没有这些不一致，RxJS已经足够困难了！

Answer 1

您正在.filter内使用.map方法。这两种方法都会迭代您的数据，这意味着当您尝试在data方法中访问它时，.filter包含一个对象。

new Rx.Observable(observer => observer.next([
  {id:0, name:'John Doe'},
  {id:1, name:'Jane Smith'}
])).map(data => { 
  // data is an object since map iterates over your array
  return data.filter(item => item.name === 'John Doe')
).subscribe(data => console.log(data), err => console.log(err))

更新

如果您想过滤数据，则不需要map功能。

只需这样做：

new Rx.Observable(observer => observer.next([
  {id:0, name:'John Doe'},
  {id:1, name:'Jane Smith'}
]))
.filter(item => item.name === 'John Doe')
.subscribe(data => console.log(data), err => console.log(err))

Answer 2

这是打字稿方面的问题，而不是实际的代码方面行为。如果您在JS上按原样运行此代码，则可以看到通过订阅记录的值。

这里的主要问题是，当您通过new Observable() ctor创建observable时，它无法通过您提供的订阅函数推断出可观察的类型，而是从Observable<T>类型推断流到订阅函数参数。因此，您的可观察类型变为Observable<{}>，并且无法访问数组原型。

通过new Observable<Array<{id: number, name: string}>>创建Observable使得可观察运算符正确地推断出值的类型。或者更好的是，静态创建方法将提供值的类型推断 - 比如

Rx.Observable.of([{
  id: 0,
  name: 'John Doe'
}, {
  id: 1,
  name: 'Jane Smith'
}])
.map(data => data.filter(item => item.name === 'John Doe'))
.subscribe(data => console.log(data), err => console.log(err))

Angular / RxJS / Typescript认为我的数据是一个对象而不是一个数组？

2 个答案: