How to fix Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed?

Question

I created an application with a Django backend and an Angular frontend, I am trying to display the list of my fleet table with its information However I get this error my data is saved in the database but I have this error when I want to display them

Html

<div class="flotte-list">
  <ul class="flottes">
    <li *ngFor="let flotte of flottes">
      
        <span class="badge">{{flotte.id}}</span> {{flotte.name}} 
        {{ flotte.nb_engins}}
      
      <button class="delete" title="delete flotte"
        (click)="delete(flotte)">x</button>
    </li>
  </ul>
</div>
<div class="flotte-box">
  <div class="flotte-form">
    <div class="textbox">
        <input #flotteName placeholder="Name">
        
    </div>
  <div class="textbox">
    <input #flotteNbengins placeholder="nb_engins" type="number">
  </div>

  <div class="textbox">
    <input #flottetest placeholder="nb_b" >
  </div>
  <div class="textbox">
    <input #flottefichier placeholder="Type fichier" >
  </div>
    <input type="button"
           class="btn" 
           value="Add flotte" 
           (click)="add(
                      flotteName.value,
                      flotteNbengins.valueAsNumber,
                      flottetest.value,
                      flottefichier.value                 
                    );
                    flotteName.value='';
                    flotteNbengins.value='';
                    flottetest.value='';
                    flottefichier.value='';
                    ">
  </div>
</div>

Component.ts

getAllFlottes() {
  this.api.getAllFlottes()
  .subscribe(data => this.flottes = data)
}
add(name: string, nb_engins: number, calculateur: string, type_fichier: string){
  name = name.trim();
  if (!name) { return; }

  if (!nb_engins) { return; }

  calculateur = calculateur.trim();
  if (!calculateur) { return; }

  type_fichier = type_fichier.trim();
  if (!type_fichier) { return; }
  


  this.api.registerFlotte({name, nb_engins, calculateur, type_fichier} as Flotte)
    .subscribe(data => {
      this.flottes.push(data);
    });
}

service.ts

 // GET Flottes
 getAllFlottes(): Observable<Flotte[]>
 {
   return this.http.get<Flotte[]>(this.base_url);
 }
registerFlotte(flotte: Flotte): Observable<Flotte>
 {

   return this.http.post<Flotte>(this.base_url, flotte,  { headers: this.httpHeaders });
 }

interface

export interface Flotte {
    id: number;
    name: string;
    nb_engins: number;
    fengins: string;
    calculateur: string;
    type_fichier: string;
    created_at: string;
}

models.py

from django.db import models
from django.core.validators import MaxValueValidator
import datetime

class Flottes(models.Model):
    
    name = models.CharField(max_length=255, null=True)
    nb_engins = models.IntegerField(validators=[MaxValueValidator(9999999999)], null=True)
    fengins = models.CharField(max_length=555, null=True)
    calculateur = models.CharField(max_length=555, null=True)
    type_fichier = models.CharField(max_length=255, null=True)
    created_at = models.DateTimeField(auto_now_add=True, null=datetime.date.today)


    def __str__(self) -> str:
        return self.name

Thanks in advance !