缺少 Angular 6 返回映射答案

【问题标题】：Angular 6 return mapping missing缺少 Angular 6 返回映射
【发布时间】：2018-11-08 02:58:54
【问题描述】：

将项目从 Angular 4 升级到 6，但在让我重返工作岗位时遇到了一些麻烦。我的 json 像

{
    "incomingViolationList":[{"productName": "Mirror",…],
    "incomingViolationListCount": 67
}

我的服务调用看起来像这样，但在 A6 中 .map 不再有效。

return this.http.get('MappViolations/MappViolations?', options)
      .map(response => <GridDataResult>{
        data: response.json().incomingViolationList,
        total: response.json().incomingViolationListCount
      });

我已经开始我的新服务调用，但不知道如何将“数据”和“总计”分开

return this.http.get<IncommingViolations[]>
      (AppSettings.API_ENDPOINT + 'MappViolations/MappViolations?', { params });

【问题讨论】：

但是发生了什么？
在 A4 版本中.map 不再是一个选项
先用管道再映射。
也许有帮助，阅读github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md 它伴随着 rxjs 的变化，其中链式点运算符被替换为管道/水龙头。

标签： angular angular-httpclient

【解决方案1】：

在 Angular 6 中，您将使用默认返回 json 响应的 HttpClient。所以你可以从响应中删除 json。

return this.http.get('MappViolations/MappViolations?', options)
     .pipe( 
 map(response => ({
  data: response.incomingViolationList, //<-- remove json
  total: response..incomingViolationListCount //<-- remove json
 })

);

【讨论】：

我正在使用 httpclient。但这是A4代码。如何从 .map 向下翻译成 A6？

【解决方案2】：

在 Angular 6 中使用 HttpClient 代替 Http 服务

使用 HttpClient 响应对象默认是 JSON，因此无需再解析（不需要response.json()）

此外，如果您使用 Angular 6 更新来更新 RxJS 6，它将看起来像下面的 pipeable 运算符。

return this.http.get('MappViolations/MappViolations?', options)
  .pipe( 
     map((response: any) => ({
      data: response.incomingViolationList,
      total: response..incomingViolationListCount
     })
  );

【讨论】：

好的，我想这差不多了。我收到以下错误。 [ts] 类型“对象”上不存在属性“incomingViolationList”。
或使用map((response: {incomingViolationList: any, incomingViolationListCount: any}) => ({

【解决方案3】：

所以你在评论中说你的情况是 map 不是一个选项。实际上它仍然是，但它的使用方式略有不同

return this.http.get('MappViolations/MappViolations?', options)
      .pipe(
        map(response => <GridDataResult>{
          data: response.json().incomingViolationList,
          total: response.json().incomingViolationListCount
      }));

注意 pipe 的使用直接在 map 的 observable 上。

【讨论】：