角度追加ID到放置/删除请求

时间:2018-11-19 07:05:57

标签: angular typescript http-method

当前,我正在尝试为我的放置/删除请求在每个http(例如http://202.160.1.102:8084/api/aq/ {id})后面加上一个ID号。我要提交的put方法是onClickUpdate(),我正在使用Ngfor遍历edit.component.html中的所有结果,它们都在表单组中,但下面是我的edit.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import  { AQ } from '../AQ';

@Component({
  selector: 'app-edit2',
  templateUrl: './edit2.component.html',
  styleUrls: ['./edit2.component.css']
})
export class Edit2Component implements OnInit {

  todayForm: FormGroup;
  submitted = false;
  data_aq: AQ[]
  public formID = this.todayForm.controls['ID'].value

  constructor(
    private HttpClient: HttpClient,
    private formBuilder: FormBuilder
  } {
    this.todayForm = this.formBuilder.group({
      ID: [''],
      District: [''],
      Value: [''],
      LastUpdate: [''],
    });
  }

  ngOnInit() {
    this.HttpClient.get('http://202.160.1.102:8084/api/aq').subscribe(
      data => {
        console.log(data)
        this.data_aq = < AQ[] > data
      })

    this.todayForm = this.formBuilder.group({
      ID: [''],
      District: [''],
      Value: [''],
      LastUpdate: [''],
    });
    let formID = this.todayForm.controls['ID'].value
  }

  onClickUpdate(formID) {
    this.HttpClient.put('http://202.160.1.102:8084/api/aq/' + formID, this.todayForm.value).subscribe(data => {
      console.log(data)
    })
    // stop here if form is invalid
    if (this.todayForm.invalid) {
      return;
    }
    alert('SUCCESS!! :-)');
  }

}

现在的问题是,通过客户端发送放置请求时,我一直收到错误请求。

  

错误错误:未捕获(承诺):TypeError:无法读取未定义的属性“控件”

     

TypeError:无法读取未定义的属性“控件”

我也想知道Angular的delete方法只是在httpclient上添加delete方法吗?这样删除的方法将是:

onClickDelete(formID) {
  this.HttpClient.put('http://202.160.1.102:8084/api/aq/' + formID, this.todayForm.value).subscribe(data => {
    console.log(data)
  });
  // stop here if form is invalid
  if (this.todayForm.invalid) {
    return;
  }

  alert('SUCCESS!! :-)')
}

2 个答案:

答案 0 :(得分:0)

我认为您应该在FormGroup上使用get API,而不是像这样直接访问控件。更改

let formID = this.todayForm.controls['ID'].value

let formID = this.todayForm.get('ID').value

答案 1 :(得分:0)

使用Lamda表达式函数之类的

onClickDelete = (formID) => {
   this.HttpClient.put('http://202.160.1.102:8084/api/aq/' + formID ,this.todayForm.value).subscribe(data=>{
          console.log(data)
       })
        // stop here if form is invalid
        if (this.todayForm.invalid) {
            return;
        }

        alert('SUCCESS!! :-)')



    }
}

并使用删除方法

this.httpclient.delete('http://202.160.1.102:8084/api/aq/' + this.todayForm.value).subscribe(data => {
console.log(data)

});