角度中的 rxjs 运算符答案

【问题标题】：rxjs operators in angular角度中的 rxjs 运算符
【发布时间】：2018-10-28 13:37:55
【问题描述】：

是否有任何运算符可以实现以下map 尝试做的事情？

this.http.get(this.url)
         .pipe(map(data => {
             let results: object[] = new Array();
             data.forEach(function(d) {
                 let result = d['a'];
                 result['new_index'] = d['b'];
                 results.push(result);
             }
             retrun results;
         }));

d['a'] 是一个对象，而d['b'] 是一个字符串。 new_index 键对于每个 result 来说都是新的。

基本上原始数据包含相当多的字段，其中我只想要 2 个字段，一个是对象类型的实际数据，另一个是类似 ID 的字段。我不需要任何其他字段。我需要提取该对象数据并将 ID 字段插入该对象。

【问题讨论】：

标签： javascript angular typescript rxjs

【解决方案1】：

我有点看不懂你的数据结构。

如果http.get 返回如下数据：

[{
  a: {...},
  b: '...'
}]

那么你就可以使用：

this.http.get(this.url)
  .pipe(map(({a, b}) => {
    a.new_index = b;
    return a;
  }));

jsfiddle example;

但如果你的数据真的是这样的：

[
  [{a: {...}, b: '...'}],
  [{a: {...}, b: '...'}],
]

（正如你在你的例子中处理的那样），所以你可以使用[].map：

this.http.get(this.url)
 .pipe(map(data =>
    data.map(({a, b}) => {
      a.new_index = b;
      return a;
    })
 ));

jsfiddle example;

【讨论】：

【解决方案2】：

您可以使用 Rxjs 中的 map 运算符以及数组上的 map 方法来执行此操作：

您的实现可以这样简化：

this.http.get(this.url)
  .pipe(
    map((data: any[]) => data.map(
      (datum: any) => ({ 
        ...datum.a,
        new_index: datum.b
      })
    ))
  );

【讨论】：