在 subscribe() 中映射一个 http 请求

Question

我看到这个问题被问了很多，但我找不到明确的解释来解释为什么我的代码不起作用！

  getItemValueHistory(ids: number) {
this.itemResource.getItemValueHistory(ids).subscribe(
  (res: ItemItemValueHistory[]) => {
    res.forEach((itemHistory) => {
      const history = itemHistory.second.listOfPrices.map(values => values.currentPrice);
      const item = itemHistory.first;
      this.simpleCharts.push(this.createSimpleChart(item, history));
    });
  }
);}

所以这个函数 git 一个 ids 数组，它将从后端获取一些值（我知道响应的命名不是很清楚，但这将在稍后修复）。

在 HTML 方面有一个 ngFor 在数组 simpleCharts 上循环。

   <div class="col-sm-4" *ngFor="let simpleChart of simpleCharts">
    <app-simple-graph [simpleChart]="simpleChart"></app-simple-graph>
  </div>

我遇到的问题是当我尝试将从后端获得的响应拆分为一个项目和一个历史部分时。 history 上的 map 总是失败，因为我无法读取未定义的列表。我以为当我在订阅中执行代码时，这只会运行当你得到可观察的？

可能是我遗漏的很明显的东西，但很想知道它是什么！

根据 Alexander 更新代码的建议：这仍然给我一个 TypeError: Cannot read 属性 'map' of undefined error at itemHistory.second.listOfPrices.map

  getItemValueHistory(ids: number) {
    this.itemResource.getItemValueHistory(ids)
      .pipe(
        map((itemHistories: ItemItemValueHistory[]) => {
          return itemHistories.map(itemHistory => {
            const history = itemHistory.second.listOfPrices.map(values => values.currentPrice);
            const item = itemHistory.first;
            return this.createSimpleChart(item, history);
          });
        })
      ).subscribe(res => {
      return this.simpleCharts.push(res);
    });
  }

Answer 1

问题是 simpleCharts 似乎不是 Observable<T> 并且您没有使用 async 之类的管道来等待 Observable发射。尝试这样的事情，使用 RxJS map 运算符使用 Array.prototype.map:

创建图表数组

getItemValueHistory(ids: number) {
  return this.itemResource.getItemValueHistory(ids)
    .pipe(
      map((itemHistories: ItemItemValueHistory[]) => {
        return itemHistories.map(itemHistory => {
          const history = itemHistory.second.listOfPrices.map(values => values.currentPrice);
          const item = itemHistory.first;
          return this.createSimpleChart(item, history);
        });
      })
    );
}

然后您可以将 Observable 保存到 class 属性以与 async 管道一起使用：

<div class="col-sm-4" *ngFor="let simpleChart of simpleCharts$ | async ">
  <app-simple-graph [simpleChart]="simpleChart"></app-simple-graph>
</div>

或 subscribe 到 getItemValueHistory 并使用发出的映射值更新 this.simpleCharts，确保将 simpleCharts 初始化为空数组：

// make sure to initialize an empty array of the appropriate type
simpleCharts = [];

getItemValueHistory(ids: number) {
  this.itemResource.getItemValueHistory(ids)
    .pipe(
      map((itemHistories: ItemItemValueHistory[]) => {
        return itemHistories.map(itemHistory => {
          const history = itemHistory.second.listOfPrices.map(values => values.currentPrice);
          const item = itemHistory.first;
          return this.createSimpleChart(item, history);
        });
      })
    ).subscribe(res => this.simpleCharts = res);
}

希望对您有所帮助！

Answer 2

看到这个问题打开了。最终，这是一个非常菜鸟的错误，没有正确映射到对象的响应。我错过了一封信，所以它从未被映射并且总是未定义，糟糕 :)

在 subscribe() 中映射一个 http 请求

Mapping an http request within subscribe()

mapping

pipe

angular

rxjs-observables