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