angular – TypeError:尝试POST请求时将循环结构转换为JSON

前端之家收集整理的这篇文章主要介绍了angular – 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('','timeHorizon': new FormControl('','continuationStep' : new FormControl('','continuationStepSign' : new FormControl('','numberOfModelParameters' : new FormControl('','systemParameters' : new FormControl(''),'param' : new FormControl(''),'netlogoFile' : new FormControl('','numberOfModelVariables' : new FormControl('','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之前工作正常

这个错误似乎是因为我试图将整个myForm对象字符串化,因为我想要的只是对字符串进行字符串化

正确的语法

let Form = JSON.stringify(this.myForm.value);
原文链接:https://www.f2er.com/angularjs/141695.html

猜你在找的Angularjs相关文章