http.put后面总是跟着http.post

Question

我有一个表单，当用户点击submit，我想发送数据到一个休息端点。我在角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");只执行一次。

我需要在这里更改什么？感谢您的帮助和提示！

Answer 1

基本上，如果你正确地格式化现有的代码，它看起来像这样：

if (this.data.one) { 
    this.updateData(); 
} 


if (this.data.two) { 
    this.deleteData(); 

}else { 
    this.addData(); 
} 

这是不是你要找的行为。

你if语句应该改为

if (this.data.one) { 
    this.updateData(); 

    } else if (this.data.two) { //*** Be careful here  
     this.deleteData(); 

    } else { 
     this.addData(); 
    } 

你缺少的else if