FORMでPOSTを実行する方法angular2に送信し、オブジェクト値をRESTサービスに渡しますか？

Question

私が達成しようとしているのは、フォーム全体の値をRESTfullサービスにPOSTしたいのですが、私はangular2でフォームを使用することについて紛らわしく、フォームのサブミット時にオブジェクト値を渡してチェックする方法はありますか？

：

それは私のRESTfulなサービスをトリガしませんし、それは私にエラーを与えるものではありません、私は以下のここ

は私のプロジェクト構造である私はそれを行う方法ですが、私が何かを欠落していたと思いますここ

は私app.component.htmlです：

以下

Create a new Retur: 
<form (ngSubmit)="submitForm()"> 

     <div class="form-group"> 
     <label for="nomor_transaksi">Nomor Transaksi</label> 
     <input type="text" placeholder="nomor transaksi" [(ngModel)]="data.nomor_transaksi" [ngModelOptions]="{standalone: true}"/> 
     </div> 

     <button type="submit">Save Contact</button> 

</form> 

は私app.component.tsです：

import { Component, OnInit } from '@angular/core'; 
import { NavbarComponent } from './navbar'; 
import { RestfullService } from './restfull.service'; 
import { Observable } from 'rxjs/Rx'; 
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [NavbarComponent], 
    providers: [RestfullService, HTTP_PROVIDERS] 
}) 

export class AppComponent { 
    title = 'app works!'; 
    public data; 
    public active; 

    ngOnInit(){ 
    this.getRest(); 
    } 

    constructor(private _restfull: RestfullService) { 
    this.data = { nomor_transaksi: '12345678' } 
    } 

    getRest(){ 
    this._restfull.getDashboard().subscribe(
     data => {this.active = data[0]} 
    ); 
    } 

    submitForm(data:Object){ 
    this._restfull.saveRetur(data); 
    console.log("exec" + data); 
    } 
} 

この場合

、私のPOST機能について、アクセスrestfull.service.tsクラスですsubmitForm（）はrestfull.service.tsクラスです。

import { Injectable } from '@angular/core'; 
    import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http'; 
    import { Observable } from 'rxjs/Rx'; 

    @Injectable() 
    export class RestfullService { 

     constructor(private http:Http) { } 

     getDashboard(){ 
     return Observable.forkJoin(
     this.http.get('http://localhost:8080/springserviceweb/').map((res:Response) => res.json()) 
     ); 
     } 

     saveRetur(data){ 
     this.http.post('http://localhost:8080/springserviceweb/service/save', JSON.stringify(data)) 

    } 

} 

、ここでは私のRESTfullサービスがデータをretrive方法です：

// save 
@RequestMapping(value = "/save", method = RequestMethod.POST, consumes ="application/json") 
    public ReturHeader save(@RequestBody ReturHeader Retur, UriComponentsBuilder ucBuilder) throws Exception { 

    try { 
     Retur.setNomor_Transaksi(retur.generateAutoNomorRetur()); 
     retur.saveRetur(Retur); 

    } catch (Exception e) { 
     Retur.setERROR_STAT(e.getMessage().trim()); 
     // return new ResponseEntity<ReturHeader>(Retur,HttpStatus.NOT_FOUND); 
    } 

    return Retur; 
} 

私のサービスは、オブジェクトをretriveする必要があり、どのように私は私のサービスが適切angular2使用してHTMLからJSONオブジェクトを渡すのですか？ここで は私app.component.ts私resful.service.ts以下

import { Component, OnInit } from '@angular/core'; 
import { NavbarComponent } from './navbar'; 
import { RestfullService } from './restfull.service'; 
import { Observable } from 'rxjs/Rx'; 
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule} from '@angular/http'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import 'rxjs/add/operator/map'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    styleUrls: ['app.component.css'], 
    directives: [NavbarComponent], 
    providers: [RestfullService, HTTP_PROVIDERS] 
}) 

export class AppComponent { 
    title = 'app works!'; 
    public data; 
    public active; 
    datareturForm: FormGroup; 

    constructor(private _restfull: RestfullService, private formBuilder: FormBuilder) { 
    this.data = { nomor_transaksi: '12345678' } 
    } 

    ngOnInit(){ 
    this.getRest(); 

    this.datareturForm = this.formBuilder.group({ 
     "nomor_transaksi": ['', Validators.maxLength(10)] 
     //nomor_transaksi: ['', Validators.maxLength(10)] 
    }) 
    } 

    getRest(){ 
    this._restfull.getDashboard().subscribe(
     data => {this.active = data[0]} 
    ); 
    } 

    submitForm(data:Object){ 
    this._restfull.saveRetur(data).subscribe((dataResponse) => { 
     console.log("exec " + data); 
    }); 

    } 
} 

です：

私は自分のコードをしようとすると、それだけで私のデータプロパティが私のコードを更新し

未定義であることを示します

import { Injectable } from '@angular/core'; 
import { HTTP_PROVIDERS, HTTP_BINDINGS, Http, Response, HttpModule, Headers, RequestOptions} from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 

@Injectable() 
export class RestfullService { 

    constructor(private http:Http) { } 

    getDashboard(){ 
    return Observable.forkJoin(
    this.http.get('http://localhost:8080/springserviceweb/service/retur/getwil/OTLB001/JKT').map((res:Response) => res.json()) 
    ); 
    } 

    saveRetur(data){ 
    console.log('masuk ke service'); 
    let headers = new Headers({'Content-Type': 'application/json'}); 
    let options = new RequestOptions({headers: headers}); 
    let body = JSON.stringify(data); 
    return this.http.post('http://localhost:8080/springserviceweb/service/retur/save', data, headers).map((res:Response) => res.json()); 
    } 

} 

"データ"変数は未定義ですが、私のRESTfullサービスに送信すると、私はここで何が間違っていますか？

Answer 1

新しいRetur作成：この

<form (ngSubmit)="submitForm()"> 

変更を：あなたは、それが戻ってくるという結果に加入されていないため、実行されていないあなたに観察

<form (ngSubmit)="submitForm(form)" #form="ngForm"> 

Answer 2

、およびこれは、console.logが未定義を返す理由です。これを修正するには、app.component.tsのコードを次のように変更してください。

submitForm() { 
    this._restfull.saveRetur(this.data) 
     .subscribe((dataResponse) => { 
      console.log("exec" + this.data); 
     }); 
} 

これで問題が解決するはずです。

EDIT：変更された回答 - 問題は元のコードではまだ問題ですが、実際にはクラス変数への参照であるはずの未定義のパラメータに関する問題です。