Question

manage-customers.component.html

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">Manage Customers</h1>
</div>

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label>Customer ID</label>
      <input type="text" #cID class="form-control" placeholder="Enter Customer ID">
    </div>
    <div class="form-group">
      <label>Customer Name</label>
      <input type="text" #cName class="form-control" placeholder="Enter Customer Name">
    </div>
    <div class="form-group">
      <label>Customer Address</label>
      <input type="text" #cAdd class="form-control" placeholder="Enter Customer Address">
    </div>
    <button type="reset" id="save"(click)="saveCustomer(cID.value,cName.value,cAdd.value)"  class="btn btn-primary">Save Customer</button>
  </div>
  <div class="col-sm-6">
<table class="table table-bordered table-hover table-dark">
  <thead>
  <tr>
    <th>Customer ID</th>
    <th>Name</th>
    <th>Address</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
<tr *ngFor="let customers of customer">
  <td>{{customers.id}}</td>
  <td>{{customers.name}}</td>
  <td>{{customers.address}}</td>
  <td><button (click)="deleteCustomer(customers)" class="btn btn-danger">Delete</button></td>
</tr>
  </tbody>
</table>
</div>
</div>

manage-customers.component.ts

    saveCustomer(id: string, name: string, address: string) {
        this.http.post('http://localhost:8080/api/v1/customers/', new Customer(id, name, address), {observe: 'response'})
          .subscribe(response => {
              if (response.status === 201) {
                alert('Save');
                this.loadAllCustomers();
              } else {
                alert('Fail to save the customer');
              }
            }
          );
      }

loadAllCustomers(): void {
    this.http.get<Customer[]>('http://localhost:8080/api/v1/customers').subscribe(customers1 => {
      this.customer = customers1;
    });
  }

说明

当我在DB中插入一个值时，我也想更新我的网页。但是问题是数据已正确输入数据库但无法更新我的页面。我不明白为什么会这样？

错误图片 我使用angular 7构建界面和控制台错误

Console error

后端代码

package com.sliit.paf.payment.controller;

import com.sliit.paf.payment.dto.CustomerDTO;
import com.sliit.paf.payment.service.custom.ManageCustomersService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;


import java.util.List;

@CrossOrigin
@RestController
@RequestMapping("api/v1/customers")
public class CustomerController {

    @Autowired
    private ManageCustomersService customersService;

    @GetMapping
    public ResponseEntity<List<CustomerDTO>> findAllCustomers(){
        List<CustomerDTO> customers = customersService.getCustomers();
        HttpHeaders httpHeaders = new HttpHeaders();
        httpHeaders.add("X-Count",customers.size() + "");
        System.out.println(customers);
        return new ResponseEntity<List<CustomerDTO>>(customers,httpHeaders, HttpStatus.OK);
    }

    @GetMapping("/{id:C\\d{3}}")
    public CustomerDTO findCustomer(@PathVariable("id") String cId){
        CustomerDTO customer = customersService.findCustomer(cId);
        return customer;
    }

    @DeleteMapping("/{id:C\\d{3}}")
    @ResponseStatus(HttpStatus.OK)
    public void deleteCustomer(@PathVariable("id") String cId){
       customersService.deleteCustomer(cId);
    }

    @PostMapping(consumes = MediaType.APPLICATION_JSON_VALUE)
    @ResponseStatus(HttpStatus.CREATED)
    public String saveCustomer(@RequestBody CustomerDTO customerDTO){
        customersService.createCustomer(customerDTO);
        return customerDTO.getId();
    }

    @PutMapping(value = "/{id:C\\d{3}}",consumes = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity updateCustomer(@PathVariable("id") String cId, @RequestBody CustomerDTO customerDTO){
       if (cId.equals(customerDTO.getId())){
           customersService.updateCustomer(customerDTO);
           return new ResponseEntity(HttpStatus.OK);
       }else {
           return new ResponseEntity(HttpStatus.BAD_REQUEST);
       }
    }

}

Answer 1

尝试一下：

Component的构造方法，注入changeDetectorRef并调用detectchange方法。

  constructor(
            private cdr: ChangeDetectorRef
          )

loadAllCustomers(): void {
this.http.get<Customer[]> 
               ('http://localhost:8080/api/v1/customers').subscribe(customers1 => {
     this.customer = customers1;
     this.cdr.detectChanges();
  });
}

插入和检索的角度7错误都在一起

1 个答案: