Данные не отображаются в таблице угловых материалов

Question

Я успешно получаю данные из API и пытаюсь отобразить их в моем компоненте HTML.Но компонент HTML не отображает никаких данных в MAT_TABLE даже после того, как я подтвердил получение их через консольный журнал.Посмотрите на код ниже, я получаю данные в тегах ul li, но не в MAT-TABLE

gallery.component.html

//GETTING AND DISPLAYING DATA HERE
<button mat-button (click)="clickfunction()" class="btn">Get types of Art in collection</button>
<ul *ngIf="dataSource.filteredData">
        <mat-selection-list #typesC>
          <mat-list-option *ngFor="let type of dataSource.filteredData">
            {{type.TYPE}}
          </mat-list-option>
        </mat-selection-list>

        <p>
          Options selected: {{typesC.selectedOptions.selected.length}}
        </p>
</ul>
//NOT DISPLAYING DATA ONLY BUT ONLY LONG BLANK SPACE IS BEING DISPLAYED
//i.e. LOOP RAN 10 TIMES STILL NOT DATA
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="ID">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.ID}}</td>
    </ng-container>

    <ng-container matColumnDef="TYPE">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.TYPE}}</td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Я подтвердил заполнение данных в источнике данных здесь,

gallery.component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { Type } from 'src/app/models/type';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-gallery',
  templateUrl: './gallery.component.html',
  styleUrls: ['./gallery.component.scss']
})
export class GalleryComponent implements OnInit {

  types: Type[];
  dataSource: MatTableDataSource<Type>;
  constructor(private data: DataService) { }
  ngOnInit() {
    this.dataSource = new MatTableDataSource();
    this.clickfunction();
  }
  clickfunction(){
    this.data.getData().subscribe((data: TypeData)=>{
      this.types=data.records;
      this.dataSource.data=data.records;
      console.log(this.dataSource)//OUTPUT OF THIS IS BELOW;
    }); 
  } 
}
 export class TypeData{
    records: Type[];
    pagination: {
      count: string;
      page: string;
      limit: string;
      totalpages: string;
    }

 }

А вот вывод console.log

Однако мой тип модели является тестовой моделью, и я получаю данные из API.

type.ts

export class Type {
    "ID":string;
    "TYPE":string;  
}

Что мне здесь не хватает?