'Observable <response>'类型中不存在属性'toPromise'而参数'response'implicity有'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'属性

和Two：参数'response'implicity有'any'类型。

我输入'toPromise'，'响应'是'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 - 类型。 Ether将noImplicitAny设置为false，或者为响应添加类型（any或Response）。

附加说明：

如果没有必要，请不要使用促销。在您的情况下，您可以毫无问题地使用observable：

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

现在您可以简单地订阅它们。