【发布时间】：2017-05-07 18:14:11
【问题描述】：
我有一个表单，当用户点击submit 时，我想将数据发送到一个休息端点。我在 Angular 2 中使用 http module。
这是表格：
<form novalidate [formGroup]="formGroup()" (ngSubmit)="send()">
<input (change)="enableThree($event.target.checked)"
formControlName="one" type="checkbox" />
<input (change)="disable($event.target.checked)"
formControlName="two" type="checkbox" >
<input formControlName="three"type="text" >
<input formControlName="four" type="text" >
<input formControlName="five" type="text" >
<input formControlName="six" type="number" >
<button>Go</button>
</form>
这是组件：
import { Component, OnInit} from '@angular/core';
import { FormBuilder, FormGroup, FormControl} from '@angular/forms';
import { MyService } from '../my.service';
@Component({
selector: 'my-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
private readonly fb: FormBuilder;
private readonly myForm: FormGroup;
private data: any;
private myService : MyService;
constructor(formB: FormBuilder, myService : MyService) {
this.myService = myService;
this.fb = formB;
this.myForm = this.fb.group({
thre: [{
value: "",
disabled: true
}],
four: new FormControl(""),
five: new FormControl(""),
six: new FormControl(""),
one:new FormControl(""),
two:new FormControl("")
});
}
ngOnInit() {}
formGroup(): FormGroup {
return this.myForm;
}
send() {
console.log("SEND REQUEST CALLED");
this.data = this.formGroup().value;
this.formGroup().reset();
if (this.data.one) {
this.updateData();
} if (this.data.two) {
this.deleteData();
}else {
this.addData();
}
}
updateData() {
this.myService.update(this.data);
}
deleteData() {
this.myService.delete(this.data.artnr);
}
addData() {
this.myService.add(this.data);
}
}
这是服务类：
import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions} from '@angular/http';
import { Entity } from './entity';
@Injectable()
export class MyService {
private baseUrl: string = 'http://localhost:5868/restapi;
private http: Http;
private entities: Array<Entity>;
private readonly headers: Headers;
private readonly requestOptions: RequestOptions;
constructor(http : Http){
this.http = http;
this.headers = new Headers({
'Content-Type': 'application/json'
});
this.requestOptions = new RequestOptions({
headers: this.headers
});
}
getEntities(): Array<Entity> {
return this.entities;
}
getAll() {
this.http.get( this.baseUrl + '/entities').
map((response: Response) => response.json()).
subscribe(data => {this.entities = data}, error => {
console.log(error);
});
}
update(data: any) {
let id = data.three;
this.http.put(this.baseUrl + '/entities/' + id, data, this.requestOptions).
map((response: Response) => response.json()).
subscribe(data => {
console.log(data);
this.getAll();
}, error => {
console.log(error);
});
}
add(data: any) {
this.http.post(this.baseUrl + '/entities', data, this.requestOptions).
map((response: Response) => response.json()).
subscribe(data=> {
this.entities.push(data);
}, error => {
console.log(error);
});
}
delete(id: Number) {
this.http.delete(this.baseUrl + '/entities/' + id, this.requestOptions).
map((response: Response) => response.json()).
subscribe(data => {
console.log(data);
this.getAll();
}, error => {
console.log(error);
});
}
}
基本上，在组件类的send()中，我根据是否单击某个复选框来决定它是update、delete还是add。
发生的情况是，当我想使用 http.put 更新数据时，总会执行一个 http.post 并且更新现有实体，但在以下发布请求中创建具有相同值的新实体.
这不会在我删除或添加实体时发生，只有在我更新时才会发生。
奇怪的是，console.log("SEND REQUEST CALLED"); 只执行一次。
我需要在这里更改什么？感谢您的帮助和提示！
【问题讨论】：
标签： angular typescript