将Spring引导API中的数据显示到原始图表Angular中

// Student.java
@Entity
public class Student {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private int age;
    // getters and setters
}

// StudentRepository.java
@Repository
public interface StudentRepository extends JpaRepository<Student, Long> {
    // 可以定义一些查询方法
}

// StudentService.java
@Service
public class StudentService {
    @Autowired
    private StudentRepository studentRepository;
    // 可以定义一些业务逻辑方法
}

// StudentController.java
@RestController
@RequestMapping("/students")
public class StudentController {
    @Autowired
    private StudentService studentService;
    
    @GetMapping
    public List<Student> getAllStudents() {
        return studentService.getAllStudents();
    }
}

// student.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Student } from './student.model';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  private apiUrl = 'http://localhost:8080/students';

  constructor(private http: HttpClient) { }

  getAllStudents(): Observable<Student[]> {
    return this.http.get<Student[]>(this.apiUrl);
  }
}

// student.component.ts
import { Component, OnInit } from '@angular/core';
import { Student } from './student.model';
import { StudentService } from './student.service';

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html',
  styleUrls: ['./student.component.css']
})
export class StudentComponent implements OnInit {
  students: Student[];

  constructor(private studentService: StudentService) { }

  ngOnInit(): void {
    this.studentService.getAllStudents().subscribe(students => {
      this.students = students;
      // 调用图表库生成图表
    });
  }
}

// student.component.html
<div *ngFor="let student of students">
  <p>{{ student.name }}</p>
  <p>{{ student.age }}</p>
</div>