Angular 附加 id 到 put/delete 请求

Posted 2023-02-25

【中文标题】Angular 附加 id 到 put/delete 请求

【英文标题】：Angular append id to put/delete request

【发布时间】：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!! :-)')

【参考方案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)

);