时间戳

首页 > 解决方案 > .map 运算符后打印的 NaN 值

angular - .map 运算符后打印的 NaN 值

问题描述

为了理解 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;
                  })
              )
}

标签： angularhttprxjsresponse

解决方案

如果您检查map 运算符的（稍微更易于理解的）文档，您会看到map每次源 observable 发出时都会调用该运算符。

这可能是您感到困惑的地方，因为它使运算符与本机Array.map函数不同。传递给的函数在数组的每个元素Array.map上调用，而运算符在你的 observable 的每个发射值上调用。map

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

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

这自然会评估为NaN.

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

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

推荐阅读