I'm having problems with Angular data transfer with API

In Angular, I cannot fill the data from the api to the table, I think there is an error in the datasource section, but I could not find it, when I follow from the console, I get the data from the api in a healthy way, but when I come to the transfer to the table, the table also appears empty.

export class List_University {
Id:string;
UniversityName :string;
UniversityDescription :string;
CreatedDate :Date;
UpdateDate :Date;

my service part where I meet the object

async read(page: number = 0, size: number = 5, successCallBack?: () => void, errorCallBack?: (errorMessage: string) => void): Promise<{ totalCount: number; university: List_University[] }> {
try {
  const observable = this.httpClientService.get<{ totalCount: number; university: List_University[] }>({
    controller: "university",
    queryString: `page=${page}&size=${size}`
  });

  const data = await firstValueFrom(observable);

  if (successCallBack) {
    successCallBack();
  }
  return data;

} catch (errorResponse) {
  if (errorCallBack) {
    errorCallBack(errorResponse.message);
  }
  throw errorResponse;
}

my list component where I use the related service

    export class ListComponent extends BaseComponent implements OnInit {

  constructor(spinner: NgxSpinnerService, private universityService: UniversityService, private alertifyService: AlertifyService) {
    super(spinner)
  }

  displayedColumns: string[] = ['UniversityName', 'UniversityDescription', 'CreatedDate', 'UpdateDate', 'Delete'];
  dataSource: MatTableDataSource<List_University> = null;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  async getUniversities() {
    this.showSpinner(SpinnerType.BallScaleMultiple);
    const allUniversity: { totalCount: number; university: List_University[] } = await this.universityService.read(
      this.paginator ? this.paginator.pageIndex : 0, this.paginator ? this.paginator.pageSize : 5,
      () => this.hideSpinner(SpinnerType.BallScaleMultiple),
      errorMessage => this.alertifyService.message(errorMessage,
        {
          dismissOther: true,
          messageType: MessageType.Error,
          position: Position.TopRight
        }));
        console.log('Tüm üniversiteler:', allUniversity);
        this.dataSource = new MatTableDataSource<List_University>(allUniversity.university);
        this.paginator.length = allUniversity.totalCount;
        
        console.log('ikinci üniversiteler:', this.dataSource.data);
        
        
      }
      async ngOnInit() {
        await this.getUniversities();
      }
      async pageChanged() {
        await this.getUniversities();
      }

my html codes that I meet

 <div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource">

    <ng-container matColumnDef="UniversityName">
      <th mat-header-cell *matHeaderCellDef> UniversityName </th>
      <td mat-cell *matCellDef="let element"> {{element.UniversityName}} </td>
    </ng-container>

    <ng-container matColumnDef="UniversityDescription">
      <th mat-header-cell *matHeaderCellDef> UniversityDescription </th>
      <td mat-cell *matCellDef="let element"> {{element.UniversityDescription}} </td>
    </ng-container>

    <ng-container matColumnDef="CreatedDate">
      <th mat-header-cell *matHeaderCellDef> CreatedDate </th>
      <td mat-cell *matCellDef="let element"> {{element.CreatedDate}} </td>
    </ng-container>

    <ng-container matColumnDef="UpdateDate">
      <th mat-header-cell *matHeaderCellDef> UpdateDate </th>
      <td mat-cell *matCellDef="let element"> {{element.UpdateDate}} </td>
    </ng-container>
    <ng-container matColumnDef="Delete">
      <th mat-header-cell *matHeaderCellDef> Delete </th>
      <td mat-cell *matCellDef="let element"><img src="src\assets\delete.png"> Sil </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator (page)="pageChanged()" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons
    aria-label="Select page of periodic elements">
  </mat-paginator>
</div>

I tried to throw the relevant codes appropriately, but I think I had a problem with the last line, I apologize, please share your valuable ideas and help me solve the error

Solution

I think that the type of your data is incorrect and the template too.

Check the type of your class & Name of variable :

 export class List_University {
    Id:string;
    UniversityName :string;
    UniversityDescription :string;
    CreatedDate :Date;
    UpdateDate :Date;
  }

But in your screenshot, all properties are in camelCase from uni array.

Exemple:

universityName
unisersityDescription
createDate
updateDate

Using correct properties in the template

So in the template, you've declared:

<ng-container matColumnDef="UniversityName">
  <th mat-header-cell *matHeaderCellDef> UniversityName </th>
  <td mat-cell *matCellDef="let element"> {{element.UniversityName}} </td>
</ng-container>

instead of

<ng-container matColumnDef="UniversityName">
  <th mat-header-cell *matHeaderCellDef> UniversityName </th>
  <td mat-cell *matCellDef="let element"> {{element.universityName}} </td>
</ng-container>

DataSource

And this line is incorrect :

this.dataSource = new MatTableDataSource<List_University>(allUniversity.university);


    console.log('Tüm üniversiteler:', allUniversity);

Your log returns an object that contains totalCount and uni properties based on your screenshot, however you have declared allUniversity.university instead of allUniversity.uni.

You need to verify the response of your data, university property does not exist here:

{
 totalCount: 22,
 uni: [
  {id: 'aa', universityName: 'xxx', universityDescription: 'oo', ...},
  .... 
 ]
}

So you should make changes like that:

   const allUniversity: { totalCount: number; uni: List_University[] } = await this.universityService.read(
      this.paginator ? this.paginator.pageIndex : 0, this.paginator ? this.paginator.pageSize : 5,
      () => this.hideSpinner(SpinnerType.BallScaleMultiple),
      errorMessage => this.alertifyService.message(errorMessage,
        {
          dismissOther: true,
          messageType: MessageType.Error,
          position: Position.TopRight
        }));
        console.log('Tüm üniversiteler:', allUniversity);
        this.dataSource = new MatTableDataSource<List_University>(allUniversity.uni);
        this.paginator.length = allUniversity.totalCount;
        
        console.log('ikinci üniversiteler:', this.dataSource.data);
        
      }