【问题标题】:property map does not exist on observable response in angular角度的可观察响应上不存在属性映射
【发布时间】:2016-09-25 17:13:58
【问题描述】:

我正在尝试在 Visual Studio 2015 应用程序中使用打字稿构建一个 Angular 2 应用程序。我正在使用 Angular 候选版本 1。

我创建了一个 risk.service 组件,它将为我的视图提供数据。尝试使用可观察的。但是我在 Visual Studio 编辑器中收到以下错误消息

可观察响应中不存在属性映射

risk.service.ts

import { Injectable } from '@angular/core';
import { IRisk } from './risk';

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

@Injectable()
export class RiskService {
    private _riskUrl = 'www.MyService.com/api/risks';
    constructor(private _http: Http) { }

    getRisks(): Observable<IRisk[]> {
        return this._http.get(this._riskUrl)
            .map((response: Response) => <IRisk[]>response.json());
            }

    }

Systemjs.config.js

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'primeng': 'node_modules/primeng'
    };

    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'primeng': { defaultExtension: 'js' }

    };

    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/testing',
      '@angular/upgrade',
      '@angular/router-deprecated'
    ];

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

Package.json

{
  "name": "product-management",
  "version": "1.0.0",
  "author": "Deborah Kurata",
  "description": "Package for the Acme Product Management sample application",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "2.0.0-rc.1",
    "@angular/compiler": "2.0.0-rc.1",
    "@angular/core": "2.0.0-rc.1",
    "@angular/http": "2.0.0-rc.1",
    "@angular/platform-browser": "2.0.0-rc.1",
    "@angular/platform-browser-dynamic": "2.0.0-rc.1",
    "@angular/router": "2.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.1",
    "es6-shim": "^0.35.0",
    "primeng": "^1.0.0-beta.6",
    "primeui": "^4.1.11",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.8",
    "systemjs": "0.19.26",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "angular-cli": "^1.0.0-beta.0",
    "clang-format": "^1.0.35",
    "codelyzer": "0.0.14",
    "ember-cli-inject-live-reload": "^1.4.0",
    "es6-promise": "3.2.1",
    "jasmine-core": "^2.4.1",
    "jasmine-spec-reporter": "^2.4.0",
    "karma": "^0.13.15",
    "karma-chrome-launcher": "^0.2.3",
    "karma-jasmine": "^0.3.8",
    "protractor": "^3.3.0",
    "ts-node": "^0.5.5",
    "tslint": "^3.6.0",
    "typescript": "^1.8.10",
    "typings": "^0.8.1"
  },
  "repository": {}
}

【问题讨论】:

    标签: angularjs angular angular2-services


    【解决方案1】:

    您遇到的问题实际上与 TypeScript VS 插件和 Intellisense 相关,而不是 Angular2。这是一个已修复的已知问题,将包含在下一个版本中。

    替换文件:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\CommonExtensions\Microsoft\TypeScript\typescriptServices.js

    使用下面的文件。备份后:https://raw.githubusercontent.com/Microsoft/TypeScript/Fix8518/lib/typescriptServices.js

    这在技术上是 question 的副本(请参阅 Eric Weiss 的回答):

    GitHub Issue

    【讨论】:

      【解决方案2】:

      我认为你可以尝试使用 5.0.0-beta.6 版本的 Rxjs:

      "dependencies": {
        "@angular/common": "2.0.0-rc.1",
        "@angular/compiler": "2.0.0-rc.1",
        "@angular/core": "2.0.0-rc.1",
        "@angular/http": "2.0.0-rc.1",
        "@angular/platform-browser": "2.0.0-rc.1",
        "@angular/platform-browser-dynamic": "2.0.0-rc.1",
        "@angular/router": "2.0.0-rc.1",
        "@angular/router-deprecated": "2.0.0-rc.1",
        "es6-shim": "^0.35.0",
        "primeng": "^1.0.0-beta.6",
        "primeui": "^4.1.11",
        "reflect-metadata": "0.1.3",
        "rxjs": "5.0.0-beta.6", // <-----
        "systemjs": "0.19.26",
        "zone.js": "^0.6.12"
      },
      

      正如 angular.io 网站上的 "5min quickstart" doc 所建议的那样。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2019-06-20
        • 2018-12-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-11-27
        相关资源
        最近更新 更多