Connexion API Laravel et Angular

Bonjour cher tous!

Je suis entrain de me former sur Angular et je rencontre un problème lier a l'affichage des données

Très souvent je conçoit les sites web avec Laravel, et depuis un moment je me sui lancé sur Angular pour le front. Mais j'ai rencontre un problème lorsque je fais appel à mon API Laravel, Angular à du mal a afficher mes données je suis obliger de faire une action sur le component html qui est chargé d'afficher les données pour que les données s'affichent pourtant je les ai bien dans la console

Voici:

            <div class="table-responsive">
                  <table class="table table-border table-striped ">
                        <thead>
                              <tr>
                                    <th scope="col">ID</th>
                                    <th scope="col">Name</th>
                                    <th scope="col">Class</th>
                                    <th scope="col">Date</th>
                                    <th width="150px">Actiion</th>
                              </tr>
                        </thead>
                        <tbody>
                              @for (eleve of eleves; track eleveById($index, eleve)){
                              <tr class="">
                                    <td scope="row">{{ eleve.id}}</td>
                                    <td>{{ eleve.nom}} {{ eleve.prenom}}</td>
                                    <td>{{ eleve.classe}}</td>
                                    <td>{{ eleve.date_naissance | date: 'd/MM/yyyy'}} </td>
                                    <td>
                                          <div class="btn btn-primary btn-sm mx-3"><i class="fa fa-pencil"></i> </div>
                                          <div class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></div>
                                    </td>
                              </tr>

                              }
                        </tbody>
                  </table>
            </div>

Le fichier .ts

@Component({
  standalone: true,
  selector: 'app-eleve-list',
  imports: [NgIf, DatePipe, RouterModule],
  templateUrl: './eleve-list.html',
})
export class EleveList implements OnInit {
  eleves: Eleve[] = [];

  constructor(private eleveService: EleveService) {}

  isLoading = true;

  eleveById(index: number, eleve: Eleve): number {
    return eleve.id!;
  }

  ngOnInit(): void {
    this.eleveService.getAll().subscribe({
      next: (data: Eleve[]) => {
        this.eleves = data;
        this.isLoading = false;
        console.log(this.eleves)
      },
      error: (err) => {
        console.error(err);
        this.isLoading = false;
      },
    });
  }
}

Le service

@Injectable({
  providedIn: 'root'
})
export class EleveService {
  private apiUrl = 'http://localhost:8000/api';

  constructor(private http: HttpClient) {}

  getAll(): Observable<Eleve[]> {
    return this.http.get<Eleve[]>(this.apiUrl+"/eleves");
  }
  .
  .
  .
  .

Le Controller de Laravel

    public function index()
    { 
        return response()->json(
            Eleve::select("id", "nom", "prenom", "classe", "date_naissance")->get()
        );
    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(Request $request)
    {
        $validated = $request->validate([
            'nom' => 'required|string',
            'prenom' => 'required|string',
            'classe' => 'required|string',
            'date_naissance' => 'required',
        ]);

        $eleve = Eleve::create($validated);

        return response()->json($eleve, 201);
    }
.
.
.