.map 运算符后打印的 NaN 值答案

【问题标题】：Printed NaN value after .map operator.map 运算符后打印的 NaN 值
【发布时间】：2019-09-01 13:37:06
【问题描述】：

为了理解 rxjs 运算符如 map 和 tap 的概念，我决定做一个简单的例子。在此示例中，我在我的 firebase 数据库中存储了一个包含这些 [1,2,3,4,5,6,7] 数字的数组。我可以通过点击方法获取它们并推送它们

 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() 方法应该对我有所帮助。但它会在控制台上返回我NaN。我的错在哪里？以下是我尝试使用.map() 方法的方法。

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

【问题讨论】：

标签： angular http rxjs response

【解决方案1】：

如果您检查（稍微更容易理解）documentation of the map operator，您将看到每次源 observable 发出时都会调用 mapoperator。

这可能是您的困惑所在，因为它使运算符与原生 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))
 )

【讨论】：