Java 如何将POST in表单提交给angular2并将对象值传递到REST服务？

我试图实现的是，我想将我的整个表单值发布到我的RESTfull服务中，但我对在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>

在本例中，我的POST函数是submitForm（），它是访问restfull.service.ts类的函数，下面是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服务如何检索数据：

// 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;
}

下面是我的resful.service.ts：

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());
  }

}

“data”变量仍然未定义，当发送到我的RESTfull服务时，我在这里遗漏了什么

创建一个新的Retur：

将此更改为：

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

---

您的observable没有运行，因为您没有订阅它将返回的结果，这就是为什么console.log返回undefined。要解决此问题，请将app.component.ts中的代码更改为以下内容：

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

这将解决您遇到的问题

---

编辑：更改答案-问题不是关于不运行的可观察性-尽管这在原始代码中仍然是一个问题，但实际上，这是一个关于未定义参数的问题，该参数应该是类变量的引用。

订阅
到
http.post
的
可观察的
来触发请求。您能提供完整的代码吗@Harrynin不应该是dataResponse而不是data吗？它应该是
submitForm（data:Object）{this.\u restfull.saveRetur（data）.subscribe（（dataResponse）=>{console.log（“exec”+data）；}）}
它应该是
submitForm（data:Object）{this.\u restfull.saveRetur（data）.subscribe（（dataResponse）=>{console.log（“exec”+dataResponse）；}）}）}
我只是像你说的那样更新了我的代码，但仍然不起作用，数据仍然为空值，我有什么遗漏吗？好的，在重新阅读问题后，我意识到，你看到的不是未定义的响应数据，而是组件文件中的数据。这里的参数数据将为null，因为您没有向表单中的submitForm方法传递任何内容。您应该在函数中使用
this.data
来访问绑定到表单中的值的属性编辑我的答案要使用组件类的数据属性仍然不工作，我只是用您的答案更新了我的代码，当我执行console.log（this.data）时，这些数据“未定义”
<form (ngSubmit)="submitForm()">

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

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