Не удалось выполнить сортировку в материале angular

Question

Я пытаюсь добавить функцию сортировки для мат-стола с материалом angular. У меня был курсор в виде руки над моими столбцами. Когда я щелкнул, я не могу увидеть его действие. Я добавил атрибут «matsort» на уровень таблицы и «mat-sort-header» для селектора ячейки mat-header-cell. 2) Во-вторых, я не могу просматривать столбец «Действия» для редактирования и удаления. Вот мой код:

app-component. html:

  <mat-table [dataSource]="emplist" matSort>
    <ng-container matColumnDef="Emp_Id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.Emp_Id}} </mat-cell>
      </ng-container>
    
      <ng-container matColumnDef="Emp_Name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.Emp_Name}} </mat-cell>
      </ng-container>
     
      <ng-container matColumnDef="Emp_Gender">
      <mat-header-cell *matHeaderCellDef mat-sort-header>  Gender </mat-header-cell>
      <mat-cell *matCellDef="let data"> {{data.Emp_Gender | settingGender}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="Emp_Deptname">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Department </mat-header-cell>
        <mat-cell *matCellDef="let data"> {{data.Emp_Deptname}} </mat-cell>
        </ng-container>

        <ng-container matColumnDef="Emp_Salary">
          <mat-header-cell *matHeaderCellDef mat-sort-header> Salary </mat-header-cell>
          <mat-cell *matCellDef="let data"> {{data.Emp_Salary}} </mat-cell>
          </ng-container>
     
      
      <ng-container matColumnDef="action">
      <mat-header-cell *matHeaderCellDef> Actions </mat-header-cell>
      <mat-cell *matCellDef="let data">
      <button mat-button color="primary" (click)="EditEmployee(data.Emp_Id)">Edit</button>
      <button mat-button color="warn" (click)="DeleteEmployee(data.Emp_Id)">Delete</button>
      </mat-cell>
      </ng-container>
     
      <mat-header-row *matHeaderRowDef="columndefs"></mat-header-row>
      <mat-row *matRowDef="let row; columns: columndefs;"></mat-row>

      <!-- <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator> -->
     </mat-table>

app-component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { EmployeeinfoService } from './employeeinfo.service';
import { FormBuilder, FormGroup, FormControl,Validators } from '@angular/forms';
import {Sort,MatSort} from '@angular/material/sort';
import { Employee } from './employee';
import {MatTableDataSource} from '@angular/material/table';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  columndefs : any[] = ['Emp_Id','Emp_Name',"Emp_Gender","Emp_Deptname","Emp_Salary"];
  @ViewChild(MatSort) sort: MatSort;
  title = 'HttpClient';
  emplist : any;
  deptlist :any;
  myform : FormGroup;
  result : string;
  submitted : boolean = false;
  btntxt : string = "Create";
  public dataSource = new MatTableDataSource<Employee>();
  //constructor
  constructor(public serviceref : EmployeeinfoService, frmbldr : FormBuilder){
    this.myform = frmbldr.group({
      Emp_Name : new FormControl("",Validators.required),
      Emp_Gender : new FormControl("",Validators.required),
      Emp_Deptno : new FormControl("",Validators.required),
      Emp_Salary : new FormControl("",Validators.required),
      
    })
  }

  //ngOnInit
  ngOnInit(){
    this.dataSource.sort = this.sort;
    //Get Employees:
    this.GetEmployeesData();
    
   }
}

В настоящее время я могу для просмотра данных и столбцов с эффектом сортировки при наведении курсора мыши, но сортировка не происходит