首页 > 解决方案 > 如何在 rxjs 的地图运算符中以角度处理 array.map

问题描述

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';

import { Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
import 'rxjs/add/observable/throw';
import { map, tap } from 'rxjs/operators';
import 'rxjs/add/operator/map'
import { Entity } from '../models/Entity';
@Injectable({
  providedIn: 'root'
})
export abstract class RestService<T> {

  constructor(protected http: HttpClient) { }
  abstract getUri(): string;
  abstract getInstance(): Entity;
  getAll(): Observable<Entity[]> {
    return this.http.get<Entity[]>(`${this.getUri()}`).pipe(map(response => response.map(item => { return this.getInstance().deserialize(item) })));
  }
}

我正在编写上面的代码来反序列化我的 JSON 响应,我收到以下错误:

core.js:1542 错误类型错误:response.map 不是 MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber 的 MapSubscriber.project (rest.service.ts:20) 的函数._next (map.js:35) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) 在 MapSubscriber.push../node_modules/rxjs/_esm5 /internal/operators/map.js.MapSubscriber._next (map.js:41) 在 MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54) 在 FilterSubscriber .push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38) 在 FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber。下一个(订阅者.js:54) 在 MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:79) 在 InnerSubscriber.push../node_modules/rxjs/_esm5/internal/InnerSubscriber。 js.InnerSubscriber._next (InnerSubscriber.js:15) 在 InnerSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)

我找不到解决此错误的方法。我在这里错过了什么吗?

标签: angular6

解决方案


这是您如何做到这一点的方法。在您的代码中,响应不是一个数组,或者至少代码不明白它是一个数组还是什么!因此,如果您确定响应将是 type ,则必须强烈键入它Entity[]。否则,您始终可以键入它any[]并且仍然response.map()可以工作。

  getAll(): Observable<Entity[]> {
    return this.http.get<Entity[]>(`${this.getUri()}`).pipe(
       map((response: Entity[]) => {
         response.map(item: Entity => { 
            return this.getInstance().deserialize(item) 
         })
       }
    ));
  }

希望它有所帮助。:)


推荐阅读