Angular таблица материалов не показывает значений, пока источник данных заполнен

Question

У меня вопрос по таблице, предоставленной библиотекой материалов angular.

Я пытаюсь заполнить ее данными, которые я получаю от службы. Я вижу, что источник, который я использую для таблицы, заполнен, но в html ничего не отображается. Это код, который у меня есть:

  public displayedColumns: string[] = ['name', 'saldo', 'totalstripes'];
  public dataSource = new MatTableDataSource;


  constructor(
    private adminservice : AdminService
  ) { 
    this.adminservice.getAllStripesFromAllUsers().subscribe(data => {
      this.dataSource.data = data;
    })

  }

.ts файл с настройкой источника данных в конструкторе

<mat-table [dataSource]="dataSource" matSort>

  <!-- Name Column -->
   <ng-container matColumnDef="name">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Naam </mat-header-cell>
     <mat-cell *matCellDef="let row"> {{row.user_forname}} </mat-cell>
   </ng-container>

  <!-- amount Column -->
    <ng-container matColumnDef="saldo">
     <mat-header-cell *matHeaderCellDef mat-sort-header> Saldo </mat-header-cell>
     <mat-cell *matCellDef="let row"> {{row.user_saldo}} </mat-cell>
    </ng-container>

    <!-- total stripes Column -->
    <ng-container matColumnDef="totalstripes">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Totaal aantal strepen</mat-header-cell>
      <mat-cell *matCellDef="let row"> {{row.totalstripes}}</mat-cell>
    </ng-container>

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

Код html для таблицы.

источник данных, заполненный данными

Надеюсь, кто-то, обладающий большими знаниями, сможет мне помочь.

ps это мой первый раз, когда я использую stackoverflow, я надеюсь, что Я ясно дал понять, что этот пост соответствует руководящим принципам. :)