Question

我有一个表单，当用户点击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");只执行一次。

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

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

http.put后面跟着http.post

1 个答案: