本文介绍了Angular2简单的HTTP服务注入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用Angular2 HTTP服务，使一个GET请求。
Hi I am trying to make a get request using the Http service in Angular2.
但Chrome会显示以下错误控制台：
but Chrome shows the following error in console :
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]
这是我的code：
here is my code:
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": "",
};
}
}
我看着却看不到什么错。
推荐答案
我得到了回答这个问题：
i got answer for this question:
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);;
}
这篇关于Angular2简单的HTTP服务注入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！