2016-08-11 65 views
2

我在標題中出現錯誤,這裏是完整的堆棧跟蹤,我不確定它是什麼,歡迎任何見解!TypeError:嘗試POST請求時將圓形結構轉換爲JSON

browser_adapter.js:84 EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31BrowserDomAdapter.logError @ browser_adapter.js:84BrowserDomAdapter.logGroup @ browser_adapter.js:94ExceptionHandler.call @ exception_handler.js:65next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
browser_adapter.js:84 ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSONBrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:74next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
browser_adapter.js:84 ORIGINAL STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:77next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
browser_adapter.js:84 TypeError: Converting circular structure to JSON 
    at Object.stringify (native) 
    at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25) 
    at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28) 
    at http://localhost:4200/main.bundle.js:57019:24 
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54) 
    at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16) 
    at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22) 
    at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26) 
    at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18) 
    at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30) 
    at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18) 
    at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14)BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:78next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
browser_adapter.js:84 ERROR CONTEXT:BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:81next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
browser_adapter.js:84 DebugContext {_view: _View_ParametersFormComponent0, _nodeIndex: 7, _tplRow: 3, _tplCol: 31}BrowserDomAdapter.logError @ browser_adapter.js:84ExceptionHandler.call @ exception_handler.js:82next @ application_ref.js:348schedulerFn @ async.js:89SafeSubscriber.__tryOrUnsub @ Subscriber.js:225SafeSubscriber.next @ Subscriber.js:174Subscriber._next @ Subscriber.js:124Subscriber.next @ Subscriber.js:88Subject._finalNext @ Subject.js:128Subject._next @ Subject.js:120Subject.next @ Subject.js:77EventEmitter.emit @ async.js:77onError @ ng_zone.js:124onHandleError @ ng_zone_impl.js:74ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ ng_zone_impl.js:86NgZone.runGuarded @ ng_zone.js:240outsideHandler @ dom_events.js:27ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 
:4200/polyfills.bundle.js:3327 Uncaught EXCEPTION: Error in ./ParametersFormComponent class ParametersFormComponent - inline template:3:31 
ORIGINAL EXCEPTION: TypeError: Converting circular structure to JSON 
ORIGINAL STACKTRACE: 
TypeError: Converting circular structure to JSON 
    at Object.stringify (native) 
    at ParametersFormComponent.onSubmit (http://localhost:4200/main.bundle.js:61451:25) 
    at DebugAppView._View_ParametersFormComponent0._handle_ngSubmit_7_0 (ParametersFormComponent.ngfactory.js:1809:28) 
    at http://localhost:4200/main.bundle.js:57019:24 
    at SafeSubscriber.schedulerFn [as _next] (http://localhost:4200/main.bundle.js:11839:54) 
    at SafeSubscriber.__tryOrUnsub (http://localhost:4200/main.bundle.js:48280:16) 
    at SafeSubscriber.next (http://localhost:4200/main.bundle.js:48229:22) 
    at Subscriber._next (http://localhost:4200/main.bundle.js:48179:26) 
    at Subscriber.next (http://localhost:4200/main.bundle.js:48143:18) 
    at EventEmitter.Subject._finalNext (http://localhost:4200/main.bundle.js:9733:30) 
    at EventEmitter.Subject._next (http://localhost:4200/main.bundle.js:9725:18) 
    at EventEmitter.Subject.next (http://localhost:4200/main.bundle.js:9682:14) 
ERROR CONTEXT: 
[object Object] 
Navigated to http://localhost:4200/? 

組件

import {Component} from '@angular/core'; 
import { FormGroup, FormControl, REACTIVE_FORM_DIRECTIVES, Validators, AbstractControl, Control } from '@angular/forms'; 
import { Headers, Http, Response } from '@angular/http'; 

@Component({ 
    selector: 'parameters-form', 
    directives: [REACTIVE_FORM_DIRECTIVES], 
    templateUrl: 'form.template.html' 
}) 
export class ParametersFormComponent { 
    response: {}; 

    myForm: FormGroup; 

    systemParameters: AbstractControl; 
    param: AbstractControl; 
    liftOperator: AbstractControl; 
    restrictOperator: AbstractControl; 
    xInitial: AbstractControl; 

    system_arr: number[]; 
    param_arr: number[]; 
    restrict_arr: number[]; 
    lift_arr: number[]; 
    xinitial_arr: number[]; 

    constructor(private http: Http) { 
    this.myForm = new FormGroup({ 
     'realisations' : new FormControl('', Validators.required), 
     'numConstSteps' : new FormControl('', Validators.required), 
     'timeHorizon': new FormControl('', Validators.required), 
     'continuationStep' : new FormControl('', Validators.required), 
     'continuationStepSign' : new FormControl('', Validators.required), 
     'numberOfModelParameters' : new FormControl('', Validators.required), 
     'systemParameters' : new FormControl(''), 
     'param' : new FormControl(''), 
     'netLogoFile' : new FormControl('', Validators.required), 
     'numberOfModelVariables' : new FormControl('', Validators.required), 
     'restrictOperator' : new FormControl(''), 
     'liftOperator' : new FormControl(''), 
     'xInitial' : new FormControl('') 
    }); 

    this.system_arr = []; 
    this.param_arr = []; 
    this.restrict_arr = []; 
    this.lift_arr = []; 
    this.xinitial_arr = []; 
    this.param = this.myForm.controls["param"]; 
    this.systemParameters = this.myForm.controls['systemParameters']; 
    this.restrictOperator = this.myForm.controls['restrictOperator']; 
    this.liftOperator = this.myForm.controls['liftOperator']; 
    this.xInitial = this.myForm.controls['xInitial']; 
    } 

    addToArray(event, value: number, target: string): void { 
    if (event.which === 13) { 

     switch (target) { 
     case 'systemParameters': 
      this.system_arr.push(value); 
      (<Control>this.systemParameters).updateValue(''); 
      break; 
     case 'param': 
      this.param_arr.push(value); 
      (<Control>this.param).updateValue(''); 
      break; 
     case 'liftOperator': 
      this.lift_arr.push(value); 
      (<Control>this.liftOperator).updateValue(''); 
      break; 
     case 'restrictOperator': 
      this.restrict_arr.push(value); 
      (<Control>this.restrictOperator).updateValue(''); 
      break; 
     case 'xInitial': 
      this.xinitial_arr.push(value); 
      (<Control>this.xInitial).updateValue(''); 
      break; 

     } 
    } 
    } 

    deleteItem(value: any, target: string): void { 
    let pos = 0; 
    switch (target) { 
     case 'systemParameters': 
     pos = this.system_arr.indexOf(value); 
     this.system_arr.splice(pos, 1); 
     break; 
     case 'param': 
     pos = this.param_arr.indexOf(value); 
     this.param_arr.splice(pos, 1); 
     break; 
     case 'liftOperator': 
     pos = this.lift_arr.indexOf(value); 
     this.lift_arr.splice(pos, 1); 
     break; 
     case 'restrictOperator': 
     pos = this.restrict_arr.indexOf(value); 
     this.restrict_arr.splice(pos, 1); 
     break; 
     case 'xInitial': 
     pos = this.xinitial_arr.indexOf(value); 
     this.xinitial_arr.splice(pos, 1); 
     break; 

    } 
    } 

    isFullfilled(m: number, n: number) { 

    if (
      m == this.restrict_arr.length 
      && m == this.xinitial_arr.length 
      && m == this.lift_arr.length 
      && n == this.param_arr.length 
      && n == this.system_arr.length 
     ) { 
     if (m != 0 && n != 0){ 
      return true; 
     } 

     } 

     return null; 
    } 
    onSubmit() { 

    this.myForm.value.systemParameters = this.system_arr; 
    this.myForm.value.liftOperator = this.lift_arr; 
    this.myForm.value.restrictOperator = this.restrict_arr; 
    this.myForm.value.param = this.param_arr; 
    this.myForm.value.xInitial = this.xinitial_arr; 

    let Form = JSON.stringify(this.myForm); 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); 
    this.http.post('http://localhost:3000/webhook', Form, { headers: headers }) 
    .map((data: Response) => data.json()) 
    .subscribe(
     data => this.response = data, 
     error => console.log(error) 
    ); 

    console.log('your submitted value:', this.myForm.value); 
    } 

} 

工作正常之前,我把它移植從Beta到RC5

回答

11

的錯誤似乎是由於這樣的事實,我試圖字符串化整個myForm的對象,其中因爲我想要的只是將數值串化爲

正確的語法

let Form = JSON.stringify(this.myForm.value);