Cannot set properties of undefined (setting 'sort') (angular)

Я только начинаю изучать TypeScript и недавно сделал таблицу и внос данных в эту таблицу. Следующей целью было сделать сортировку и пагинацию. Так как я ещё всё плохо понимаю, я сделал новую таблицу для этого.

Теперь мне нужно было избавиться от таблицы, что у меня получилось. Таблица показывается, но не работает сортировка и пагинация.

Помогите, пожалуйста, понять мне, как это правильно написать с subscribe, который используется?

Ошибка возникает после попытки присвоения, но оно не происходит.

Файл .ts:

import { BaseServiceService } from './../../service/base-service.service';
import { Student } from './../../models/students';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { LiveAnnouncer } from '@angular/cdk/a11y';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatSort, Sort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Students } from 'src/app/service/in-memory-data/memory-sort-header';

@Component({
  selector: 'app-sort-header',
  templateUrl: './sort-header.component.html',
  styleUrls: ['./sort-header.component.css']
})
export class TableSortingExample implements AfterViewInit {
  displayedColumns: string[] = ['id', 'name', 'surname'];
  dataSource: MatTableDataSource<Student>;// = new MatTableDataSource<Student>(this.students.getAllArticles());

  constructor(private _liveAnnouncer: LiveAnnouncer,
    private baseServiceService: BaseServiceService) {
      this.baseServiceService.getAllStudents().subscribe((students:Student[]) => {
        this.dataSource = new MatTableDataSource<Student>(students);
        console.log("Инициализация DataSource");

      });
    }

  pgIndex= 2;
  firstLastButtons= true;
  pnDisabled= true;
  hdPageSize= true;

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  ngAfterViewInit() {

    console.log("Попытка присваивания");
    this.dataSource.sort = this.sort;
    console.log("Присваивание");
    this.dataSource.paginator = this.paginator;
    //this.baseServiceService.getAllStudents().subscribe(data => this.students = data);
  }

  announceSortChange(sortState: Sort) {
    if (sortState.direction) {
      this._liveAnnouncer.announce('Sorted ${sortState.deriction}ending');
    } else {
      this._liveAnnouncer.announce('Sorting cleared');
    }
  }
  onChangePage(pe:PageEvent) {
    console.log(pe.pageIndex);
    console.log(pe.pageSize);
  }
}

Файл .html:

<div>
  <table mat-table [dataSource]="dataSource" matSort (matSortChange)="announceSortChange($event)"
        class="mat-elevation-z8">

    <!-- id Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by id">
        No.
      </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by name">
        Name
      </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- surname Column -->
    <ng-container matColumnDef="surname">
      <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by surname">
        Surname
      </th>
      <td mat-cell *matCellDef="let element"> {{element.surname}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator
     [length]="5"
     [pageSizeOptions]="[5, 10, 25]"
     [showFirstLastButtons]="firstLastButtons"
     (page)="onChangePage($event)">
  </mat-paginator>
</div>
  <!-- <button class="myButton" (click)="AddNewStudent()">Add new student</button> -->