Angular2简单的Http服务注入

时间：2015-11-23 11:40:19

标签： angular

您好我正在尝试使用Angular2中的Http服务发出请求。

但Chrome在控制台中显示以下错误：

EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null] angular2.dev.js:21835 
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null]BrowserDomAdapter.logError @ angular2.dev.js:21835BrowserDomAdapter.logGroup @ angular2.dev.js:21846ExceptionHandler.call @ angular2.dev.js:4431(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn  @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ORIGINAL EXCEPTION: Cannot find a differ supporting object '[object Object]'BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4440(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4443(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
Error: Cannot find a differ supporting object '[object Object]'
at new BaseException (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:16034:21)
at IterableDiffers.find (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:5124:15)
at NgFor.Object.defineProperty.set [as ngForOf] (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:15224:48)
at AbstractChangeDetector.ChangeDetector_FormApp_0.detectChangesInRecordsInternal (eval at <anonymous> (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20415:14), <anonymous>:2662:37)
at AbstractChangeDetector.detectChangesInRecords (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20209:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20192:12)
at AbstractChangeDetector._detectChangesInShadowDomChildren (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20259:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20196:12)
at AbstractChangeDetector._detectChangesInLightDomChildren (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20253:14)
at AbstractChangeDetector.runDetectChanges (http://127.0.0.1:8081/node_modules/angular2/bundles/angular2.dev.js:20193:12)BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4444(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
ERROR CONTEXT:BrowserDomAdapter.logError @ angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4447(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21835 
_Context {element: script, componentElement: form-app, context: FormApp, locals: Object, injector: Injector…}BrowserDomAdapter.logError @  angular2.dev.js:21835ExceptionHandler.call @ angular2.dev.js:4448(anonymous function) @ angular2.dev.js:19543NgZone._onError @ angular2.dev.js:10711errorHandling.onError @ angular2.dev.js:10630run @ angular2.dev.js:141(anonymous function) @ angular2.dev.js:10651zoneBoundFn @ angular2.dev.js:111lib$es6$promise$asap$$flush @ angular2.dev.js:1301
angular2.dev.js:21845 EXCEPTION: Cannot find a differ supporting object '[object Object]' in [null]

这是我的代码：

enrollmentService.ts 

import {Component,CORE_DIRECTIVES, Injectable, Inject } from 'angular2/angular2';
import {Http, HTTP_PROVIDERS} from 'angular2/http';


@Component({
selector: 'employee-enrollment',
directives: [CORE_DIRECTIVES],
providers: [HTTP_PROVIDERS]

})


@Injectable()
export class EnrollmentService {

    nationality: Array<any>;
   _http: any;
    constructor( @Inject(Http) http: Http) {

        this._http = http;
    }
    getItems() {

      return this._http.get('static/components/HR/employee_enrollment_form/json/nationality.json')
            .map(res => res.json())
            .subscribe(nationality => this.nationality = nationality);

    }

}

Enrollment.ts 

import {Component, View, Inject, Injectable, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2';
import {EnrollmentService} from '../../../services/employeeEnrollmentService';

@Component({
    selector: 'form-app',
    template:`
      <div class="col-sm-8">
           <select class="col-sm-6 form-control" [(ng-model)]="employeeData.nationality">
             <option value="">-- select one --</option>
             <option *ng-for="#ndata of nationality" [value]="ndata.value">{{ndata.value}}</option>
           </select>
      </div>`

    directives: [CORE_DIRECTIVES, FORM_DIRECTIVES],
    providers: [EnrollmentService],
})

@Injectable()
export class FormApp {

    nationality:Array<any>;
    enrollmentService:EnrollmentService;

    constructor(@Inject(EnrollmentService) enrollmentService:EnrollmentService) {

        this.nationality = enrollmentService.getItems();

        this.employeeData = {

        "first_name": "",
        "middle_name": "",
        "last_name": "",
        "date_of_birth": "",
        "nationality": "",
        "mobile_number": "",
        "home_address": "",
        "pin_code": "",
        "subject": "",
        "category": "",
        "city": "",
        "state": "",
        "country": "",
       };

    }
}

我看了http://jbavari.github.io/blog/2015/10/19/angular-2-injectables/，但看不出什么错误。

1 个答案:

答案 0 :(得分：1)

我得到了这个问题的答案：

enrollmentService.ts 

getItems() {

  return this._http.get('static/components/HR/employee_enrollment_form/json/nationality.json')
        .map((responseData) => {
            return responseData.json();
         });

}

<强> Enrollment.ts 

constructor(@Inject(EnrollmentService) enrollmentService:EnrollmentService) {

        enrollmentService.getItems().subscribe(res => this.nationality = res);;
}
相关问题
最新问题