Récupérer des données dans un Angular DataTable

ng new material-table-apprenants
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

ng add @angular/material
? Choisissez un nom de thème prédéfini ou "personnalisé" pour un thème personnalisé: Indigo / Rose
? Configurer des styles de typographie de matériaux angulaires globaux? Oui
? Configurer des animations de navigateur pour le matériau angulaire? Oui

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

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import {  MatPaginatorModule } from '@angular/material/paginator';
import {  MatTableModule } from '@angular/material/table';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

import { Component, OnInit, ViewChild } from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatTableDataSource} from '@angular/material/table';
import { HttpClient } from '@angular/common/http';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns = ['cinApprenant', 'prenom', 'nom','dateNaissance','adresses','adressMail','civilite'];
  post = [];
  //dataSource:any;
  dataSource: MatTableDataSource<any>;

  constructor(private http: HttpClient){

  this.http.get('http://localhost/apprenants.php').subscribe(data => {
  this.post.push(data);

  this.dataSource = new MatTableDataSource(this.post[0]);


    }, error => console.error(error));
  }
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  ngOnInit() {

  setTimeout(() => this.dataSource.paginator = this.paginator);
  //this.paginator._intl.itemsPerPageLabel = 'Enregistrement par page.';

  }

}

export interface PeriodicElement {
  cinApprenant: number;
  prenom: string;
  nom: string;
dateNaissance: string;
adresses: string;
adressMail: string;
civilite: string;
}

<h2 style="text-align:center;padding:10px 0;">Angular 9 Material Datatable with phpmysql data</h2>
<div class="container">
    <div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" class="table table-striped">
    <!-- Position Column -->
    <ng-container matColumnDef="cinApprenant">
      <th mat-header-cell *matHeaderCellDef> cinApprenant </th>
      <td mat-cell *matCellDef="let post"> {{post.cinApprenant}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="prenom">
      <th mat-header-cell *matHeaderCellDef> prenom </th>
      <td mat-cell *matCellDef="let post"> {{post.prenom}} </td>
    </ng-container>

     <!-- Name Column -->
     <ng-container matColumnDef="nom">
      <th mat-header-cell *matHeaderCellDef> nom </th>
      <td mat-cell *matCellDef="let post"> {{post.nom}} </td>
    </ng-container>
    <!-- Weight Column -->
    <ng-container matColumnDef="dateNaissance">
      <th mat-header-cell *matHeaderCellDef>dateNaissance </th>
      <td mat-cell *matCellDef="let post"> {{post.dateNaissance}} </td>
    </ng-container>
    <ng-container matColumnDef="civilite">
      <th mat-header-cell *matHeaderCellDef>civilite </th>
      <td mat-cell *matCellDef="let post"> {{post.civilite}} </td>
    </ng-container>
    <ng-container matColumnDef="adressMail">
      <th mat-header-cell *matHeaderCellDef>adressMail </th>
      <td mat-cell *matCellDef="let post"> {{post.adressMail}} </td>
    </ng-container>
    <ng-container matColumnDef="adresses">
      <th mat-header-cell *matHeaderCellDef>adresses </th>
      <td mat-cell *matCellDef="let post"> {{post.adresses}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let post; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
</div>

Angular DataTable avec des données Php Mysql