时间戳

首页 > 解决方案 > 订阅前如何正确映射数据？

javascript - 订阅前如何正确映射数据？

问题描述

我有以下功能：

    this.localStorage.getItem('user').subscribe(user => {
      this.user = user;
      this.authSrv.getOrders(this.user.einsender).pipe(map(orders => {
        map(order => { order["etz"] = "23"; return order})
        return orders;
      })).subscribe(orders => {
        this.orders = orders;
        this.completeOrders = orders;
        console.log(orders);
        this.waitUntilContentLoaded = true;
      })
    })

没有地图的结果是：

[{id: 1, etz: "21"}]

使用上面的地图，我尝试输入数组，然后按顺序和顺序我尝试更改etz属性，但不知何故没有任何变化。有人可以看一下吗？我很感激任何帮助！

标签： javascriptangulartypescriptrxjsobservable

解决方案

我在这里看到了多个问题。

  1. 尽量避免嵌套订阅。相反，您可以使用 RxJS 高阶映射运算符之一，例如switchMap. 您可以在此处和此处找到不同的高阶映射运算符。

  2. Array#map要调整数组的每个元素，除了 RxJS运算符之外，您还需要使用方法map。

  3. 您可以使用 JS扩展运算符来调整对象的某些属性并保留其他属性。

尝试以下

this.localStorage.getItem('user').pipe(
  switchMap(user => {
    this.user = user;
    return this.authSrv.getOrders(this.user.einsender).pipe(
      map(orders => orders.map(order => ({...order, order['etz']: '23'})))
    });
  })
).subscribe(
  orders => {
    this.orders = orders;
    this.completeOrders = orders;
    console.log(orders);
    this.waitUntilContentLoaded = true;
  },
  error => {
    // good practice to handle HTTP errors
  }
);

推荐阅读