Angular2フォームの循環構造をJSON EXCEPTIONに変換する

Question

JSONにデータを送信しようとしました。 私はJSONのテーブルにそれを追加しようとしているが、私はオンラインこのエラーについて読んだ

EXCEPTION: Error in ./FormComponent class FormComponent - inline template:2:32 caused by: Converting circular structure to JSON 

次のエラーを取得していますが、それを解決する方法が、今は本当に確認してください。 モデルドリブンフォームを使用していますが、誰かが間違っていた箇所を指摘できれば感謝しています。

form.component.html

<div class="container"> 
    <h2>User Data</h2> 
    <form [formGroup] ="userForm" (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 
     <label>Name</label> 
     <input type="text" class="form-control" formControlName="name"> 
    </div> 
    <div class="form-group"> 
     <label>Username</label> 
     <input type="text" class="form-control" formControlName="username"> 
    </div> 
    <div class="form-group"> 
     <label>Email</label> 
     <input type="text" class="form-control" formControlName="email"> 
    </div> 

    <div formGroupName="address"> 
    <div class="form-group"> 
     <label>Street</label> 
     <input type="text" class="form-control" formControlName="street"> 
    </div> 
    <div class="form-group"> 
     <label>Suite</label> 
     <input type="text" class="form-control" formControlName="suite"> 
    </div> 
    <div class="form-group"> 
     <label>City</label> 
     <input type="text" class="form-control" formControlName="city"> 
    </div> 
    <div class="form-group"> 
     <label>Postal</label> 
     <input type="text" class="form-control" formControlName="postalcode"> 
    </div> 
    </div> 
<button type="submit" class="btn btn-primary">Submit</button> 
</form> 

</div> 

form.component.ts

import { Component, OnInit } from '@angular/core'; 
import {UserService} from '../users.service'; 
import {Http} from '@angular/http'; 
import {Router} from '@angular/router'; 
import {FormGroup, FormControl} from '@angular/forms'; 

@Component({ 
    selector: 'app-form', 
    templateUrl: './form.component.html', 
    styleUrls: ['./form.component.css'], 
    providers: [UserService] 

}) 
export class FormComponent{ 
    private user; 
    constructor(private _userService:UserService){ 


    } 

userForm = new FormGroup({ 
name: new FormControl(), 
username: new FormControl(), 
email: new FormControl(), 
address: new FormGroup({ 
    street: new FormControl(), 
    suite: new FormControl(), 
    city: new FormControl(), 
    postalcode: new FormControl() 

}) 

}); 
onSubmit(){ 
this._userService.addUser(this.userForm) 
.subscribe(res => { 
    this.user = res; 
}) 

} 
} 

user.service.ts

import {Injectable} from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import {Http} from '@angular/http'; 
import {User} from './user'; 
@Injectable() 
export class UserService{ 
constructor(private _http:Http){ 


} 
getUsers(){ 
return this._http.get("https://jsonplaceholder.typicode.com/users") 
.map(res=>res.json()); 

} 
addUser(post){ 
return this._http.post("https://jsonplaceholder.typicode.com/users", JSON.stringify(post)) 
.map(res=> res.json()); 



} 
} 

追加コード

user.component.html

import {Component} from '@angular/core'; 
import 'rxjs/add/operator/map'; 
import {Http} from '@angular/http'; 
import {UserService} from './users.service'; 

@Component({ 
selector: 'user', 
template: ` 
<div class="container"> 
    <h1>Users</h1> 
<h2><a routerLink="newuser"><button class="btn btn-primary">Add User</button></a></h2> 
    <table class="table table-bordered"> 
    <thead> 
     <tr> 
     <th>Firstname</th> 
     <th>Email</th> 
     <th>Edit</th> 
     <th>Delete</th> 
     </tr> 
    </thead> 
    <tbody *ngFor="let user of _users"> 
     <tr> 
     <td>{{user.name}}</td> 
     <td>{{user.email}}</td> 
     <td><i class="glyphicon glyphicon-edit"></i></td> 
      <td><i class="glyphicon glyphicon-remove"></i></td> 
     </tr> 

    </tbody> 
    </table> 
</div> 
`, 
providers: [UserService] 

}) 


export class UsersComponent{ 

    private _users; 
constructor(private _userService:UserService){ 
this._userService.getUsers() 
.subscribe(res => { 
this._users = res; 

}) 

} 


} 

Answer 1

あなたはそれがデフォルトで直列化され、JSON.stringify()を必要としません。

編集：これを試すことができますか？

this._userService.addUser(this.userForm.value)