angular 无法从后端获取数据到前端

Question

我正在尝试将数据发送到 angular 前端。试图从另一个 api 获取数据，但仍然对我不起作用。所以 API 正在工作，但数据无法显示在前端。我阅读了文档，但它无助于解决问题。希望有人能帮助我。

员工Class:

export class Employee {
id!: number;
firstName!: string;
lastName!: string;
emailId!: string;
}

员工-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeService } from '../employee.service';

@Component({
  selector: 'app-employee-list',
  templateUrl: './employee-list.component.html',
  styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

  employees!: Employee[];

  constructor(private employeeService: EmployeeService) { }

  ngOnInit(): void {
    this.getEmployees();
  }

  private getEmployees(){
    this.employeeService.getEmployeesList().subscribe(data =>{
      this.employees = data;
    });
  }

}

员工-list.component.html

<h2> Mitarbeiter Liste</h2>
<table class = "table table-striped">
    <thead>
        <tr>
            <th> Vorname</th>
            <th> Nachname</th>
            <th> Email</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{ employee.firstName }}</td>
            <td>{{ employee.lastName }}</td>
            <td>{{ employee.emailId }}</td>
        </tr>
    </tbody>
</table>

Employee.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { Employee } from './employee';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class EmployeeService {

  private baseUrl = 'http://localhost:8080/api/v1/employees';

  constructor(private httpClient: HttpClient) { }

  getEmployeesList(): Observable<Employee[]>{
    return this.httpClient.get<Employee[]>(this.baseUrl);
  }
}

App.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

API数据：

[{"id":1,"firstName":"Frank","lastName":"wettew","emailId":"test@gmail.de"},{"id":2,"firstName":"Herbert","lastName":"Hubert","emailId":"herb@gmail.de"}] ^

前端:

Answer 1

我复制了你的 Angular 前端，它工作正常。

所以我的假设是从后端获取数据时出错。

如果“员工”请求成功，请在网络选项卡中检查浏览器。

Answer 2

我现在解决了这个问题。谢谢你的建议！我需要添加到我的控制器 @CrossOrigin(origins = "localhost:4200")

angular 无法从后端获取数据到前端

angular cannot get data from backend to frontend

angular