Mat-table не заполняет данные, поступающие из http-запроса

У меня есть проект в angular и play, и я использовал таблицу данных материала angular, которую я хочу заполнить данными, поступающими с моего игрового сервера в виде строки json. И когда я пытаюсь его заполнить, ничего не отображается, как будто пусто. Я упомянул кодовую базу, которую использовал. Данные отображаются на консоли, и никаких ошибок не выскакивало.

appService.ts

  public getData() {
    return this.http.get<any>(this.getDataUrl);
  }

таблица.ts

  displayedColumns = ['name', 'location'];


  clubModels: ClubModel[] = [];
  dataSource;

  ngOnInit() {
    this.appService.getData()
      .subscribe((clubModels: ClubModel[]) => {
        this.clubModels = clubModels;
        // check response
        console.info(clubModels.response);
        this.dataSource = new MatTableDataSource(clubModels);
      }, error => console.error(error));

  }

таблица.html

<table mat-table class = "full-width-table" matSort aria-label = "Elements" [dataSource] = "dataSource">

  <ng-container matColumnDef = "name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
    <td mat-cell *matCellDef = "let row">{{row.name}}</td>
  </ng-container>

  <ng-container matColumnDef = "location">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
    <td mat-cell *matCellDef = "let row">{{row.location}}</td>
  </ng-container>

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

</table>

ClubModel.ts

export interface ClubModel {
  name: string;
  location: string;
}

Консоль дает этот вывод

(3) [
      {name: "aaa1", location: "testLocation1"},
      {name: "bbb2", location: "testLocation2"},
      {name: "ccc3", location: "testLocation3"}
    ]