angular - 角度列表不显示数据

Question

我正在尝试使用 Angular 和 Spring Boot 制作一个 CRUD 应用程序。我试图创建一个客户列表。但是 GET 请求列表之后仍然是空的。

客户服务.ts：

export class CustomerService {

  formData  : Customer;
  list : Customer[];
  readonly rootURL ='http://localhost:8085/api/auth'

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }

  constructor(private http : HttpClient) { }

  showList():Observable<Customer[]>{
    return this.http.get<Customer[]>(this.rootURL+'/customer', 
        {headers : new HttpHeaders({ 'Content-Type': 'application/json' })})
    .pipe(catchError(this.handleError))
  }

}

客户列表.component.ts

export class CustomerListComponent implements OnInit {

  constructor(
    public httpClientService:CustomerService,
  ) { }

  customer : Customer[] = [];

  ngOnInit() {
    this.httpClientService.showList().subscribe((data: Customer[])=>{
      console.log(data);
      this.customer = data;
    }) 
  }

  populateForm(customer:Customer){
    this.httpClientService.formData=Object.assign({}, customer);
  }

}

客户列表.component.html

<tr *ngFor="let cus of httpClientService.list">
      <td (click)="populateForm(cus)">{{cus.id}}</td>
      <td (click)="populateForm(cus)">{{cus.firstname}} {{cus.lastname}}</td>
      <td (click)="populateForm(cus)">{{cus.email}}</td>
      <td><button (click)="onDelete(cus.id)" class="btn btn-sm btn-outline-danger">X</button></td>
   enter image description here</tr>

标签： angular

Answer 1

看来，您的项目中有两个不同的列表。

在您customer-list.component.html尝试迭代本地客户列表的过程中，如下所示：

<tr *ngFor="let cus of customer">
      <td (click)="populateForm(cus)">{{cus.id}}</td>
      <td (click)="populateForm(cus)">{{cus.firstname}} {{cus.lastname}}</td>
      <td (click)="populateForm(cus)">{{cus.email}}</td>
      <td><button (click)="onDelete(cus.id)" class="btn btn-sm btn-outline-danger">X</button></td>
   enter image description here</tr>