“订阅”类型上不存在属性“地图”

Question

我正在尝试在http-service 文件中触发错误回调，如果存在任何错误，我将从本地服务调用数据。我将其返回到名为 app-config-service 的服务文件。

http-service.ts 的代码：

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { MockService } from './mock-service';

@Injectable()
export class HttpRestService {

    constructor(private http:Http,mockService:MockService ) {

    }

    get(pUrl) {
        return this.http.get(pUrl).subscribe(
             function(response) { res => response.json()},
             function(error) { res => this.mockService.userMethods(pUrl) },
             function() { console.log("the subscription is completed")}
        );
    }

    post(pUrl, pData) {
        return this.http.post(pUrl, pData).map(res => res.json());
    }
}

app-config-service.ts 的代码：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpRestService } from './http-service';
@Injectable()
export class AppConfigService {
    constructor(private httpRestService: HttpRestService) {
    }
    testAPIMethod(pUrl) {
        return this.httpRestService.get(pUrl).map(res => res);
    }
}

据我所知，subscribe 用于操作接收到的结果，map 用于直接复制数据而不做任何更改。

所以我在这些情况下使用了订阅和映射。

我不知道为什么会触发错误，因为我是打字稿的新手。

错误如下：

typescript: E:/ActiveProjects/IonBase/src/services/app-config-service.ts, line: 14
        Property 'map' does not exist on type 'Subscription'.

  L13:  testAPIMethod(pUrl) {
  L14:      return this.httpRestService.get(pUrl).map(res => res);

我能做些什么来解决这个问题？

Answer 1

我为您的代码创建了一个实时示例，并添加了一些修改以使您能够正常工作。在这里你可以看到完整的例子：https://stackblitz.com/edit/angular-luxw4a 打开控制台并点击按钮。

您应该更改get-method 和testAPIMethod-method 中的处理方式。因为这个函数的处理是反过来的。

现在解释一下：

在您的HttpRestService 中，您应该只创建 API 调用。我建议您将 Observables 用于 API 调用。这是您的HttpRestService 的工作示例：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';

@Injectable()
export class HttpRestService {

  constructor(private http: Http) {}

  get(pUrl: string): Observable<any> {
    return this.http
    .get(pUrl).map((res: Response) => res.json());
  }

  post(pUrl, pData): Observable<any> {
    return this.http
    .post(pUrl, pData).map((res: Response) => res.json());
  }
}

现在您可以将您的HttpRestService 注入您的AppConfigService 并订阅您的get 方法。这是一个例子：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Rx';

import { HttpRestService } from './http-rest.service';
import { MockService } from './mock.service';

@Injectable()
export class AppConfigService {

  constructor(private httpRestService: HttpRestService,
              private mockService: MockService) {}

  testAPIMethod(pUrl: string) {
    return this.httpRestService.get(pUrl).subscribe(result => {
      console.log('Service success');
      console.log(result);
    }, error => {
      console.log('Service failed');
      console.log(error);
      console.log('Run MockService');
      this.mockService.userMethods(pUrl);
    }, () => {
      console.log('Subscription done');
    });
  }
}

忽略console.log-outputs，它仅用于测试。所以在这个订阅中你可以处理这个订阅的状态。如果 API-Call 返回一些结果，那么你可以用它做一些事情。如果您的 API-Call 返回错误，那么您可以运行替代调用或本地服务。如果您的 API 调用成功，您可以使用 done-state () => { // done }。

Answer 2

嘿，注意你在 HttpRestService 上所做的事情， 当 get 方法调用你返回订阅时，因为当你返回 .subscribe 时从方法返回的订阅，而不是使用：

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { MockService } from './mock-service';

@Injectable()
export class HttpRestService {

constructor(private http:Http,mockService:MockService) {}

get(pUrl) {
   return this.http.get(pUrl).map(res => res.json());
}

post(pUrl, pData) {
    return this.http.post(pUrl, pData).map(res => res.json());
}
}

并在此处订阅：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpRestService } from './http-service';
@Injectable()
export class AppConfigService {
constructor(private httpRestService: HttpRestService) {
}
testAPIMethod(pUrl) {
    return this.httpRestService.subscribe(
     (data) => console.log(data),
     (error) => console.log(error)
 );
}