Question

我正在尝试更新客户数据，只有当我更改数据并单击更新按钮时才注意到控制台上出现以下错误：

<块引用>

HttpErrorResponse {headers: HttpHeaders, status: 400, statusText: "OK", url: "http://localhost:8080/api//update-customer/undefined", ok: false, ...}

无法识别客户 ID。我哪里做错了？

customer.service.ts

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  
  
@Injectable({  
  providedIn: 'root'  
})  
  
export class CustomerService {  
  
  private baseUrl = 'http://localhost:8080/api/';  
  
  constructor(private http:HttpClient) { }  
  
  getCustomerList(): Observable<any> {  
    return this.http.get(`${this.baseUrl}`+'customers-list');  
  }  
  
  createCustomer(customer: object): Observable<object> {  
    return this.http.post(`${this.baseUrl}`+'save-customer', customer);  
  }  
  
  deleteCustomer(id: number): Observable<any> {  
    return this.http.delete(`${this.baseUrl}/delete-customer/${id}`, { responseType: 'text' });  
  }  
  
  getCustomer(id: number): Observable<Object> {  
    return this.http.get(`${this.baseUrl}/customer/${id}`);  
  }  
  
  updateCustomer(id: number, value: any): Observable<Object> {  
    return this.http.post(`${this.baseUrl}/update-customer/${id}`, value);

customer-list.component.html

div class="panel panel-default">
  <div class="panel-heading">
    <h1 style="text-align: center">Customers</h1><br>
    <div class="row" [hidden]="!deleteMessage">

      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <div class="alert alert-info alert-dismissible">
          <button type="button" class="close" data-dismiss="alert">×</button>
          <strong>Customer Data Deleted</strong>
        </div>
      </div>
      <div class="col-sm-4"></div>
    </div>
  </div>


  <div class="panel-body">
    <table class="table table-hover table-sm">
      <thead class="thead-light">
        <tr>
          <th>Customer Name</th>
          <th>Customer Email</th>
          <th>Action</th>

        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let customer of customers">
          <td>{{customer.customer_name}}</td>
          <td>{{customer.customer_email}}</td>
          <td><button (click)="deleteCustomer(customer.customer_id)" class='btn btn-primary'><i
                class="fa fa-futboll-0">Delete</i></button>
            <button type="button" class="btn btn-primary" (click)="openModal(editProfileModal, customer)" >Update</button>
          </td>
        </tr>
      </tbody><br>
    </table>
  </div>
</div>

<ng-template #editProfileModal let-modal>
  <div class="modal-header">
   <h5 class="modal-title" id="editProfileLabel">Edit Profile</h5>
   <button type="button" class="close" (click)="modal.dismiss()" aria-label="Close">
    <span aria-hidden="true">&times;</span>
   </button>
  </div>
  
  <div class="modal-body">
   <form [formGroup]="editProfileForm" (ngSubmit)="onSubmit()">
    <div class="form-group row">
     <label for="name" class="col-sm-4 col-form-label">Customer Name</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" formControlName="customer_name" id="customer_name">
     </div>
    </div>
    <div class="form-group row">
     <label for="email" class="col-sm-4 col-form-label">Customer Email</label>
     <div class="col-sm-8">
      <input type="text" class="form-control" formControlName="customer_email" id="customer_email">
     </div>
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-success" [hidden]="isupdated">Update</button>  
      <button type="button" class="btn btn-danger" data-dismiss="modal" (click)="changeisUpdate()">Close</button> 
    </div>
   </form>
  </div>
 </ng-template>

customer-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../customer.service';
import { Customer } from '../customer';
import { Observable, Subject } from "rxjs";
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-customer-list',
  templateUrl: './customer-list.component.html',
  styleUrls: ['./customer-list.component.css']
})
export class CustomerListComponent implements OnInit {
  editProfileForm!: FormGroup;
  customer_id: number | undefined;

  constructor(private customerservice: CustomerService, private fb: FormBuilder, private modalService: NgbModal) {} 

  customersArray: any[] = [];
  dtTrigger: Subject<any> = new Subject();

  customers: Customer[] = [];
  customer: Customer = new Customer();
  deleteMessage = false;
  customerlist: any;
  isupdated = false;


  ngOnInit() {
    };
    this.customerservice.getCustomerList().subscribe(data => {
      console.log(data)
      this.customers = data;
      this.dtTrigger.next();
    })
    this.editProfileForm = this.fb.group({
      customer_id: [''],
      customer_name: [''],
      customer_email: [''],
      customer_branch: ['']
     });
  }

  openModal(targetModal: any, customer: any) {
    this.modalService.open(targetModal, {
     centered: true,
     backdrop: 'static'
    });
   
    this.editProfileForm!.patchValue({
     customer_name: customer.customer_name,
     customer_email: customer.customer_email,
     customer_branch: customer.customer_branch
    });
   }

   onSubmit() {
    this.updateCustomer();    
  }
  
updateCustomer() {
    this.customerservice.updateCustomer(this.customer.customer_id!, this.customer)
      .subscribe(data => {
        console.log(data);
        this.customer = new Customer();
        this.customerservice.getCustomerList();
      }, error => console.log(error));
  }

  deleteCustomer(id: any) {
    this.customerservice.deleteCustomer(id)
      .subscribe(
        data => {
          console.log(data);
          this.deleteMessage = true;
          this.customerservice.getCustomerList().subscribe(data => {
            this.customers = data
          })
        },
        error => console.log(error));
  }

 
}

Answer 1

我看不到您在代码中的任何位置设置了 customer.customer_id。

Answer 2

没有customer_id，所以你发送的是“undefined”。您可以通过浏览器中的网络选项卡中的调试工具（F12 键打开）跟踪您的请求。

Answer 3

据我所知，您从未用数据填充 this.customer。什么时候发生？

还 - 在您的代码中，您为什么使用非空断言运算符“！” (this.customer.customer_id!)？

this.customerservice.updateCustomer(this.customer.customer_id!, this.customer)

这告诉 angular 不关心您传递的内容是否为空。如果您要更新记录，则 ID 不应为空，因此为了将来进行故障排除，我会删除此处的感叹号。

为什么无法识别id？

3 个答案: