Angular 2-无法读取未定义的属性“ get”(http未定义)

Angular2的新手,遇到了奇怪的问题。呈现index.html时,app.component呈现html部分,但是在user.service.ts中的数据调用上失败-特别是http未定义(下面的代码)。

浏览器错误 异常图片

app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
@NgModule({
    imports: [
        BrowserModule,
        HttpModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

主要

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 

用户服务

import { Component, Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { User } from '../models/user';

@Injectable()
export class UserService {
    private user: User;

    constructor(private http: Http) {

    }

    getCurrentUser() {
        return this.http.get('http://jsonplaceholder.typicode.com/posts')
            .map((request: any) => {
                return this.user = {
                    id: 'testID',
                    firstName: 'fname test',
                    lastName: 'lastname Test',
                    displayName: 'display name test'
                }

            });
    }
}

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { UserService } from './services/user.service';
import { User } from './models/user';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html',
    providers: [UserService]
})
export class AppComponent implements OnInit {
    user: User;

    constructor(
        @Inject(UserService) private _userService: UserService) {
    }
    getCurrentUser() {
        this._userService.getCurrentUser()
            .subscribe(user => this.user = user);
    }
    ngOnInit() {
        this.getCurrentUser();
    }
}

系统配置

map: {
        // our app is within the app folder
        app: 'public/dist/js',
        // angular bundles
        '@angular/core': 'node_modules/@angular/core/bundles/core.umd.js',
        '@angular/common': 'node_modules/@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'node_modules/@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'node_modules/@angular/http/bundles/http.umd.js',
        '@angular/router': 'node_modules/@angular/router/bundles/router.umd.js',
        '@angular/forms': 'node_modules/@angular/forms/bundles/forms.umd.js',
        // other libraries
        'rxjs': 'node_modules/rxjs'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }  

package.json中的代码段

 "devDependencies": {
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3",
"typings": "^1.4.0",
"@types/jasmine": "^2.5.35",
"angular-cli": "1.0.0-beta.17",
"codelyzer": "1.0.0-beta.0",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.4.1",
"tslint": "^3.15.1",
"gulp": "3.9.1",
"gulp-clean-css": "2.0.13",
"gulp-concat": "2.6.0",
"gulp-plumber": "1.1.0",
"gulp-typescript": "3.0.2",
"gulp-uglify": "2.0.0",
"gulp-tslint": "6.1.2",
"gulp-sourcemaps": "2.1.1",
"systemjs": "0.19.39",
"systemjs-builder": "0.15.32"
}

nodejs版本:6.2.0

npm版本:3.10.8

任何建议将不胜感激

苏帕米

您需要在app.module中提供用户服务,并删除@Inject和中的providers条目app.component

app.module.ts

import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
//Add your UserService import here

@NgModule({
    imports: [
        BrowserModule,
        HttpModule],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ UserService ]
})
export class AppModule { }

app.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { UserService } from './services/user.service';
import { User } from './models/user';

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent implements OnInit {
    user: User;

    constructor(
        private _userService: UserService) {
    }
    getCurrentUser() {
        this._userService.getCurrentUser()
            .subscribe(user => this.user = user);
    }
    ngOnInit() {
        this.getCurrentUser();
    }
}

这样,UserService依赖关系由注入器管理,您不会直接向组件提供服务(不建议使用此行为,甚至删除了该行为自最终版本发布后就不知道了)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法读取Angular 2中未定义的属性“错误”?

Angular 2`无法读取未定义的属性'dataService'

Angular2:无法读取未定义的属性“名称”

无法读取未定义的属性“ post”-Angular 2

Angular2无法读取未定义的属性“ push”

无法读取未定义[Angular2]的属性“ isStopped”

Angular 2 TypeError:无法读取未定义的属性“ toUpperCase”

无法读取未定义angular2的属性

Angular - Ionic 2 - 无法读取未定义的属性“订阅”

Angular 2+无法读取未定义的属性“ id”

Angular 2-无法读取未定义的属性“ ...”

无法读取未定义Angular 2的属性

Angular 2无法读取未定义类型的属性“ subscribe”:无法读取未定义的属性“ subscribe”

Angular无法读取未定义的属性

无法读取未定义 Angular 的属性

(Angular http $):无法读取未定义的属性“ length”

(Angular2 和 Typescript)Angular 的 DatePicker 无法读取未定义的属性“切换”

Angular 1.4.4(基于模块/组件的结构)-无法读取未定义的属性“ get”(http未定义)

NgZone / Angular2 / Ionic2 TypeError:无法读取未定义的属性“运行”

Angular 6:无法读取未定义的属性“ get”

无法使用Angular读取未定义的属性“ get”

TypeError:无法读取未定义角度2的属性“ http”

无法读取原生脚本angular2中未定义的属性全局数组

angular2:错误:TypeError:无法读取未定义的属性“ ...”

Angular 2:错误类型错误:无法读取未定义的属性“值”

Angular2-无法读取嵌套调用中未定义的属性“ subscribe”

angular2形式-无法读取未定义的属性替换

无法读取未定义的属性“登录” - 测试间谍 - Angular2+

Angular2(RC-4):无法读取未定义的属性“ pathsWithParams”