javascript - 类型 'toPromise' 上不存在属性 'Observable<Response>' 并且参数 'response' 隐式具有 'any' 类型

Question

这是我的.service.ts，但我有两个错误:

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

import 'rxjs/add/operator/toPromise';

import { Product } from './Product';

@Injectable()
export class ProductService {

    private headers = new Headers({ 'Content-Type': 'application/json' });
    private productsUrl = 'app/products';  // URL to web api

    constructor(private http: Http) { }

    getProducts(): Promise<Product[]> {
        return this.http.get(this.productsUrl)
            .toPromise() //<--- FIRST
            .then(response => response.json().data as Product[]) //<--- TWO
            .catch(this.handleError);
    }

    getProduct(id: number): Promise<Product> {
        return this.getProducts()
            .then(products => products.find(product => product.id === id));
    }

    delete(id: number): Promise<void> {
        const url = `${this.productsUrl}/${id}`;
        return this.http.delete(url, { headers: this.headers })
            .toPromise()
            .then(() => null)
            .catch(this.handleError);
    }

    create(wording: string): Promise<Product> {
        return this.http
            .post(this.productsUrl, JSON.stringify({ wording: wording  }), { headers: this.headers })
            .toPromise()
            .then(res => res.json().data)
            .catch(this.handleError);
    } 

    createFull(product: Product): Promise<Product> {
        return this.http
            .post(this.productsUrl, JSON.stringify({ product: product }), { headers: this.headers })
            .toPromise()
            .then(res => res.json().data)
            .catch(this.handleError);
    }

    update(product: Product): Promise<Product> {
        const url = `${this.productsUrl}/${product.id}`;
        return this.http
            .put(url, JSON.stringify(product), { headers: this.headers })
            .toPromise()
            .then(() => product)
            .catch(this.handleError);
    }

    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error); // for demo purposes only
        return Promise.reject(error.message || error);
    }
}

首先:“Observable”类型上不存在属性“toPromise”

和两个:参数“response”隐式具有“any”类型。

我导入了“toPromise”、“Response”和“Observable”，但它仍然不起作用...... 请问我该如何解决这个问题？

谢谢。

编辑我的systemjs.config.js:

(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'lib-npm/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
        app: 'app',
        main: 'app/main.js',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      api : { defaultExtension: 'js' },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
  if (!global.noBootstrap) { bootstrap(); }

    // Bootstrap the `AppModule`(skip the `app/main.ts` that normally does this)
  function bootstrap() {
      console.log('Auto-bootstrapping');

      // Stub out `app/main.ts` so System.import('app') doesn't fail if called in the index.html
      System.set(System.normalizeSync('app/main.ts'), System.newModule({}));

      // bootstrap and launch the app (equivalent to standard main.ts)
      Promise.all([
        System.import('@angular/platform-browser-dynamic'),
        getAppModule()
      ])
      .then(function (imports) {
          var platform = imports[0];
          var app = imports[1];
          platform.platformBrowserDynamic().bootstrapModule(app.AppModule);
      })
      .catch(function (err) { console.error(err); });
  }

    // Import AppModule or make the default AppModule if there isn't one
    // returns a promise for the AppModule
  function getAppModule() {
      if (global.noAppModule) {
          return makeAppModule();
      }
      return System.import('app/app.module').catch(makeAppModule)
  }

  function makeAppModule() {
      console.log('No AppModule; making a bare-bones, default AppModule');

      return Promise.all([
        System.import('@angular/core'),
        System.import('@angular/platform-browser'),
        System.import('app/app.component')
      ])
      .then(function (imports) {

          var core = imports[0];
          var browser = imports[1];
          var appComp = imports[2].AppComponent;

          var AppModule = function () { }

          AppModule.annotations = [
            new core.NgModule({
                imports: [browser.BrowserModule],
                declarations: [appComp],
                bootstrap: [appComp]
            })
          ]
          return { AppModule: AppModule };
      })
  }
})(this);

Answer 1

从 rxjs/Rx 导入 Observable 可能会导致问题。您可以尝试从 rxjs/Observable 导入吗？

编辑:

也许这就是你的问题的原因(VS 中的错误):Angular 2 2.0.0-rc.1 Property 'map' does not exist on type 'Observable<Response>' not the same as issue report

对于第二个错误:看起来你有

"noImplicitAny": true,

在您的tsconfig.json中。这迫使您为所有内容指定类型，并且如果未定义，则不会使用 any 类型。将 noImplicitAny 设置为 false，或者向响应添加类型(any 或 Response)。

<小时/>

附加说明:

如果没有必要，不要使用 toPromise。就您而言，您可以毫无问题地使用可观察量:

return this.http.get(this.productsUrl)
        .map(response => response.json().data as Product[]);

现在您只需订阅它们即可。