从服务器接收数据时如何获取角度材料数据表以正确排序

Question

从Mongo数据库接收某个日期。表格显示正确，但是当我尝试排序时，它不起作用。我已经在线检查了几种解决方案，但无法使其正常运行。

export class RecommendationtabelComponent implements OnInit, AfterViewInit{
  recommendations: Recommendation[] = [];
  private recommendationsSub: Subscription;
  displayedColumns: string[] = ['Class', 'LOE', 'Recommendation', 'Guideline'];
  public dataSource = new MatTableDataSource<Recommendation>();


  @ViewChild(MatSort) sort: MatSort;

  constructor(private http: HttpClient,
    public getRecommendationsService: GetRecommendationService,
    public recommendationInformationService: RecommendationInformationService) {}

  ngOnInit() {
    this.getRecommendationsService.getRecommendations();
    this.recommendationsSub = this.getRecommendationsService.getRecommendationUpdateListener()
    .subscribe((recommendations: Recommendation []) => {
      this.recommendations = recommendations;
      this.dataSource.data = this.recommendations;
    });
  }

  ngAfterViewInit(): void {
    this.dataSource.sort = this.sort;
  }
}

这是我用来显示表格和结果的模板

<div class="recommendations-container">
  <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

  .....

    <ng-container matColumnDef="Guideline">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Guideline</th>
        <td mat-cell *matCellDef="let element">
            {{element.guideline}}

        </td>
        <td mat-footer-cell *matFooterCellDef></td>
    </ng-container>

    <ng-container matColumnDef="Loading">
      <td mat-footer-cell *matFooterCellDef colspan="6">
        Loading Data....
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns;sticky:true"></tr>
    <tr mat-row *matRowDef="let row;columns:displayedColumns"></tr>
    <tr mat-footer-row *matFooterRowDef="['Loading']" [ngClass]="{'hide':dataSource!=null}"></tr>

  </table>
</div>