Angular 附加 id 到 put/delete 请求答案

【问题标题】：Angular append id to put/delete requestAngular 附加 id 到 put/delete 请求
【发布时间】：2019-04-21 12:38:52
【问题描述】：

目前，我正在尝试为我的每个 http（例如 http://202.160.1.102:8084/api/aq/{id}）附加一个 ID 号，以用于我的 put/delete 请求。我尝试提交的 put 方法是 onClickUpdate()，我使用 Ngfor 循环遍历 edit.component.html 中的所有结果，它们都在 formgroup 中，但下面是我的 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!! :-)');
  }

}

我现在的问题是，当我通过客户端发送 put 请求时，我不断收到错误请求。

错误错误：未捕获（承诺中）：TypeError：无法读取未定义的属性“控件”

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

我还想知道 Angular 的删除方法是否只是在 httpclient 上添加删除方法？这样删除的方法是：

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!! :-)')
}

【问题讨论】：

标签： angular typescript http-method

【解决方案1】：

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

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

到

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

【讨论】：

【解决方案2】：

像这样使用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)

});

【讨论】：