http.put ist immer gefolgt von http.post

Question

Ich habe ein Formular und wenn der Benutzer auf submit klickt, möchte ich die Daten an einen Rest-Endpunkt senden. Ich bin der http module in Angular 2.

mit Hier ist die Form:

<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> 

Hier ist die Komponente:

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

} 

Und hier ist der Service-Klasse:

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


} 

Grundsätzlich In send() in der Komponente Klasse, ich entscheide, ob es einist, delete oder add basierend darauf, ob auf ein bestimmtes Kontrollkästchen geklickt wird.

Wenn ich die Daten mit http.put aktualisieren möchte, wird immer auch ein http.post ausgeführt und eine vorhandene Entität wird aktualisiert, aber eine neue Entität mit den gleichen Werten wird im folgenden Beitrag erstellt anfordern.

Dies passiert nicht, wenn ich eine Entität lösche oder hinzufüge, nur wenn ich update.

Seltsamerweise wird console.log("SEND REQUEST CALLED"); nur einmal ausgeführt.

Was muss ich hier ändern? Danke für Hilfe und Tipps!

Answer 1

Grundsätzlich, wenn Sie richtig Ihre vorhandenen Code formatiert werden, sieht es wie folgt aus:

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


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

}else { 
    this.addData(); 
} 

das nicht das Verhalten Sie suchen ist.

Ihre if Anweisung anstelle sollte

sein

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

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

    } else { 
     this.addData(); 
    } 

Sie vermissen die else if