.map 运算符后打印的 NaN 值

Question

为了理解rxjs的map、tap等操作符的思路，决定做一个简单的例子。在我的 firebase 数据库的这个例子中，我存储了一个包含这些 [1,2,3,4,5,6,7] 数字的数组。我可以获取它们并通过 tap 方法推送它们

 myNumbers:number[]=[];
  fetchNumbers() {
        return this.http
          .get<number>('https://deneme-65e26.firebaseio.com/deneme.json')
              .pipe(
                 tap(myNumbers=> {
                  this.myNumbers.push(myNumbers);
                }) 
              )}

在我的组件中，我也在使用 .subscribe() 收听此方法并在我的控制台上打印响应

 onFetch() {
    this.dataService.fetchNumbers().subscribe(
      response=>
      {
        console.log(response);
      }
    ); 
  }

到目前为止没有问题。当我想将此响应乘以 10 时，.map() 方法应该可以帮助我，因为我知道。但它 returns 我 NaN 在控制台上。我的错误在哪里？这是我尝试使用 .map() 方法的方法。

 fetchNumbers() {
        return this.http
          .get<number>('https://deneme-65e26.firebaseio.com/deneme.json')
              .pipe(
                 map(myNumbers=>
                  {return 10*myNumbers;
                  })
              )
}

Answer 1

如果您检查（稍微更容易理解）documentation of the map operator，您会看到每次您的源可观察对象发出时都会调用 map运算符。

这可能是您混淆的来源，因为它使运算符不同于本机 Array.map 函数。传递给 Array.map 的函数在 数组的每个元素 上调用，而 map 运算符在 每个发出的值 上调用] 你的可观察量。

在您的情况下，您发出的值是 Array 类型，因此您的代码正在尝试执行

[1,2,3,4,5,6,7] * 10

自然会计算为 NaN。

您现在可以修复您的代码，确保您在发出的数组上调用 Array.map 函数，如下所示：

.pipe(
      map((myNumbers: number[]) => myNumbers.map((value: number) => value*10))
 )

.map 运算符后打印的 NaN 值

Printed NaN value after .map operator

http

response

rxjs

angular