使用 rxjs 在 Angular 中转换 http 服务响应答案

【问题标题】：Transform http service response in Angular using rxjs使用 rxjs 在 Angular 中转换 http 服务响应
【发布时间】：2020-10-09 20:55:19
【问题描述】：

这是用例：

我正在调用一个返回我 ID 的 http 方法。
传递上述 ID 以获取对象响应数组。

回复：

[
   {
      "cuisp":"17296744",
      "instr_type":"Common Stock (CS)",
      "isConversion":"No",
      "issue_date":"04/31/2020",
      "rev_rule":"common equity tier 1",
      "isCumulative":"Noncumulative",
      "notional_amt":"8434.695",
      "amt_transacted":"8434.695",
      "isPerpetual":"Perpetual",
      "isFixed":"Floating"
   }, ...
]

现在我想将isEditable : false 添加到该响应中的每个对象。我试过下面的代码。

this._httpservice.getTemplateForVersion(this.selected_template).pipe(
      concatMap((res: any) => {
        return this._httpservice.getTemplateJsonData(res.id).pipe(
          mergeAll(),
          map((d: any) => {
            d['isEditable'] = false;
            return d;
          })
        );
      })
    ).subscribe(res => {
      console.log(res);
    })

但是它只是更新响应的第一个元素。我需要最后的回应是

[
       {
          "cuisp":"17296744",
          "instr_type":"Common Stock (CS)",
          "isConversion":"No",
          "issue_date":"04/31/2020",
          "rev_rule":"common equity tier 1",
          "isCumulative":"Noncumulative",
          "notional_amt":"8434.695",
          "amt_transacted":"8434.695",
          "isPerpetual":"Perpetual",
          "isFixed":"Floating",
          "isEditable":false,
       }, ...
    ]

提前致谢。

【问题讨论】：

也许：return { ...d, isEditable: false};?
这和我做的一样……
这和我做的一样？这是什么意思？
d['isEditable'] = false;return d; 这与上面的传播相同.. 也按照您的建议尝试过.. 没有运气
它可能无法解决您的问题，但如果您将 mergeAll() 和 map() 替换为 mergeMap()，可能会更容易理解发生了什么

标签： angular typescript rxjs

【解决方案1】：

RxJs map 操作符允许你修改流，但修改本身应该在函数内部完成：

map((d: any) => {
    return d.map(item => ({...item, isEditable: false}));        
})

【讨论】：

这是正确的。 @user1608841，您不需要 mergeAll() 运算符。只需使用concatMap() 后跟map()。实际上我认为switchMap 更合适，但这可能并不重要，因为http 调用无论如何只会发出一次。所以，一共：this._httpservice.getTemplateForVersion(this.selected_template).pipe( switchMap(res => this._httpservice.getTemplateJsonData(res.id)), map((d:any[]) => d.map(item => {...item, isEditable: false})) ).subscribe(res => { console.log(res); })