Angular nodejs mysql

Décrivez ici votre problème ou ce que vous cherchez à faire.

```Je développe une application angulaire avec un formulaire dans une table html, qui a un bouton pour supprimer une ligne dans la table et un bouton pour ajouter une nouvelle ligne. Lorsque j'appuie sur le bouton Enregistrer, seules les informations de remplissage de la dernière ligne sont enregistrées dans la base de données . Il n'y a aucun problème au niveu du backend````

voici mon code typescript et html

import { EdtService} from '../_services/edt.service';

interface Enseignant {
  value: string;
  viewValue: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  submitted = false;

  constructor( private edtService:  EdtService) { }

  ngOnInit(): void {

  }

  public TabArray: Array<any> = [];

  public edt: any = { };

  addFieldValue() {
      this.TabArray.push(this.edt);
      this.edt = {};
  }

  deleteFieldValue(index:any) {
      this.TabArray.splice(index, 1);
  }

   enseignants:Enseignant[] = [
      {value: 'Andry', viewValue: 'Andry'},
      {value: 'Manoa', viewValue: 'Manoa'},
      {value: 'Christiano', viewValue: 'Christiano'}
    ];

    saveEDT(): void {
      const data = {
      enseignantname: this.edt.enseignantname,
      heure1: this.edt.heure1,
      heure2: this.edt.heure2,
      heure3: this.edt.heure3,
      heure4: this.edt.heure4

      };

      this.edtService.createEdt(data)
        .subscribe(
          response => {
            console.log(response);
            this.submitted = true;
          },
          error => {
            console.log(error);
          });
    }

}````

```` <table class="table  table-bordered">
  <thead>
      <tr>
          <th>Enseignant</th>
          <th>07h15-09h15</th>
          <th>09h15-11h15</th>
          <th>12h30-14h00</th>
          <th>14h00-15h30</th>
          <th>Action</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let field of TabArray; let i = index">
          <td>
            <mat-form-field appearance="outline">
              <mat-select [(ngModel)]="field.enseignantname" >
                <mat-option *ngFor="let food of foods" [value]="food.value">
                  {{food.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </td>
          <td>
              <mat-form-field appearance="outline">
                <input [(ngModel)]="field.heure1" matInput type="text" name="{{field.heure1}}" />
              </mat-form-field>

          </td>
          <td>
              <mat-form-field appearance="outline">
                <input [(ngModel)]="field.heure2" matInput type="text" name="{{field.heure2}}" />
              </mat-form-field>

          </td>
          <td>
              <mat-form-field appearance="outline">
                 <input [(ngModel)]="field.heure3" matInput type="text" name="{{field.heure3}}" />
              </mat-form-field>

          </td>
          <td>
              <mat-form-field appearance="outline">
                <input [(ngModel)]="field.heure4" matInput type="text" name="{{field.heure4}}" />
              </mat-form-field>

          </td>

          <td>

              <button mat-icon-button class="deletebutton" color="warn" type="button" (click)="deleteFieldValue(i)">
                 <mat-icon>delete</mat-icon>
              </button>
          </td>
      </tr>
      <tr>
          <td>
            <mat-form-field appearance="outline">
              <mat-select  id="formEnseignant" [(ngModel)]="edt.enseignantname" >
                <mat-option *ngFor="let enseignant of enseignants" [value]="enseignant.value">
                  {{food.viewValue}}
                </mat-option>
              </mat-select>
            </mat-form-field>
          </td>
          <td>
              <mat-form-field appearance="outline">
                <input matInput type="text" id="formHeure1" [(ngModel)]="edt.heure1" name="Heure1" />
              </mat-form-field>

          </td>
          <td>
              <mat-form-field appearance="outline">
                <input matInput type="text" id="formHeure2" [(ngModel)]="edt.heure2" name="Heure2" />
              </mat-form-field>

          </td>
          <td>
             <mat-form-field appearance="outline">
                <input matInput type="text" id="formHeure3" [(ngModel)]="edt.heure3" name="Heure3" />
             </mat-form-field>

          </td>
          <td>
              <mat-form-field appearance="outline">
                <input matInput type="text" id="formHeure4" [(ngModel)]="edt.heure4" name="Heure4" />
              </mat-form-field>

          </td>
          <td>
              <button mat-icon-button class="addbutton" color="primary"type="button" (click)="addFieldValue()">
                 <mat-icon>add</mat-icon>
              </button>
          </td>
      </tr>
  </tbody>
</table>
<button mat-raised-button color="primary"class="enregistrer" (click)="saveEDT()">
  <mat-icon>done_outline</mat-icon>
</button>
<p *ngIf="submitted">Requete executée avec succès</p>````
**Ce que je veux**

Comment enregistrer toutes  les informations dans le formulaire  de toutes les lignes du tableau ?.

**Ce que j'obtiens**

Décrivez vos éventuelles erreurs ou ce que vous obtenez à la place de ce que vous attendez :(