Mat-sort标头在mat-table angular 5上不起作用

我在我的angular 5项目中使用了 mat-table 和 mat-sort . 我已经包含了所需的所有内容，但排序 Headers 仍然无法正常工作，没有错误，并且表格的生成正如它应该的那样 . 我的看法：

<h5>User List </h5>
<div class="example-container mat-elevation-z8">
  <div class="example-header">
    <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

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

    <ng-container matColumnDef="id">
      <mat-header-cell *matHeaderCellDef mat-sort-header> User ID </mat-header-cell>
      <mat-cell *matCellDef="let item">
        {{item.id}}
        <span (click)="editUserData(item)"> edit </span>
        <span (click)="viewUserData(item)"> view </span>
        <span (click)="confirmDelete(item)"> delete </span>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="full_name">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.full_name}}  </mat-cell>
    </ng-container>

    <ng-container matColumnDef="mobile">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Mobile / Phone </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.mobile}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="email">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Email </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.email}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="organization">
      <mat-header-cell *matHeaderCellDef mat-sort-header> Organization </mat-header-cell>
      <mat-cell *matCellDef="let item"> {{item.organization}} </mat-cell>
    </ng-container>

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



    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
  </mat-table>
  <mat-paginator #paginator
                 [pageSize]="10"
                 [pageSizeOptions]="[5, 10, 20]"
                 [showFirstLastButtons]="true">
  </mat-paginator>
</div>
<p-confirmDialog header="Confirmation" icon="fa fa-question-circle" width="425"></p-confirmDialog>

我的组件：

import {Component, OnInit, ViewChild} from '@angular/core';
import {MatTableDataSource, MatPaginator, MatSort} from '@angular/material';
import {AppService} from '../../../app.service';
import {NavigationExtras, Router} from '@angular/router';
import {ConfirmationService} from "primeng/api";
import {AppComponent} from "../../../app.component";
import {FullLayoutComponent} from "../../../layout/full_layout.component";

@Component({
  selector: 'app-user-list',
  templateUrl: './user-list.component.html',
  styleUrls: ['./user-list.component.scss']
})
export class UserListComponent implements OnInit {
  displayedColumns = ['id', 'full_name', 'mobile', 'email', 'organization', 'status' ];
  dataSource: any;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  private employeeTemp: any;
  constructor(
    private appService: AppService,
    private _router: Router,
    private confirmationService: ConfirmationService,
    private flashMsg: FullLayoutComponent ,
  ) {

  }

  ngOnInit() {

    this.appService.getUserDataList().subscribe(res => {
      this.employeeTemp = res;
      this.dataSource = new MatTableDataSource(this.employeeTemp);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

    } );

  }



  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  public editUserData(item) {
    const navigationExtras: NavigationExtras = {
      queryParams: { 'qsUserId': item.id },
      fragment: 'anchor',
    };
    this._router.navigate([ 'user/edit' ], navigationExtras);
  }


  public viewUserData(item) {

    const navigationExtras: NavigationExtras = {
      queryParams: { 'qsUserId': item.id },
      fragment: 'anchor',
    };
    this._router.navigate([ 'user/view' ], navigationExtras);
  }
  confirmDelete(item) {
    this.confirmationService.confirm({
      message: 'Are you sure you want to delete this Employee?',
      header: 'Confirmation',
      accept: () => {
        this.appService.deleteUser(item.id).subscribe(res => {
            // Splice Or something so the page doesnt reload but the data gets removed from the view.
            this.employeeTemp = this.employeeTemp.filter(employee => employee.id != item.id)
            this.dataSource = new MatTableDataSource(this.employeeTemp);
            this.flashMsg.flashMsg('success', 'Deleted', 'User has been deleted.'); //  this.EmployeeListComponent();
          },
          err => {
            this.flashMsg.flashMsg('error', 'Error', 'User has not been deleted.');
          });
      },
      reject: () => {
      },
    });
  }
}