物料表默认排序不起作用

我有以下几点 mat-table ,但排序功能不起作用。。

据我所知,我已遵照指示行事 here 正确,并且它在各个方面都工作良好(箭头显示在列标题旁边),但数据没有实际排序。

loans.component.html

<div class="container">

  <h1>Current Loans</h1>

    <table mat-table [dataSource]="loans" class="mat-elevation-z8" matSort>

      <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
          <td mat-cell *matCellDef="let loan">{{loan.id}}</td>
        </ng-container>

      <ng-container matColumnDef="borrowerName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Client Name </th>
        <td mat-cell *matCellDef="let loan">{{loan.borrowerName}}</td>
      </ng-container>
      <ng-container matColumnDef="fundingAmount">
          <th mat-header-cell *matHeaderCellDef mat-sort-header> Funding </th>
          <td mat-cell *matCellDef="let loan">{{loan.fundingAmount}}</td>
        </ng-container>
        <ng-container matColumnDef="repaymentAmount">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Repayment </th>
            <td mat-cell *matCellDef="let loan">{{loan.repaymentAmount}}</td>
          </ng-container>

      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay;"></tr>
    </table>
</div>

import { Component, OnInit } from '@angular/core';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { Loan } from '../loan';
import { Observable } from 'rxjs';

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

  loans: Loan[];
  columnsToDisplay = ['id', 'borrowerName', 'fundingAmount', 'repaymentAmount'];

  constructor(private http:HttpClient) {

    this.getLoans().subscribe((loans) => {
      this.loans = loans;
      console.log(loans);
    })
  }

  getLoans() {
    return <Observable<Loan[]>> this.http.get('http://localhost:1113/api/loans');
  }

  ngOnInit() {
  }
}

根据Sajeetharan的回答,我现在将我的组件更改为

import { Component, OnInit, ViewChild } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Loan } from '../loan';
import { Observable } from 'rxjs';
import {MatTableDataSource, MatSort} from '@angular/material'

@Component({
  selector: 'app-loans',
  templateUrl: './loans.component.html',
  styleUrls: ['./loans.component.css']
})
export class LoansComponent implements OnInit {
  columnsToDisplay = ['id', 'borrowerName', 'fundingAmount', 'repaymentAmount'];

  dataSource : MatTableDataSource<Loan>;

  @ViewChild(MatSort) sort: MatSort;

  constructor(private http:HttpClient) {

    this.getLoans().subscribe((loans) => {
      this.dataSource = new MatTableDataSource(loans);
      console.log(loans);
    });
  }

  getLoans() {
    return <Observable<Loan[]>> this.http.get('http://localhost:1113/api/loans');
  }

  ngOnInit() {
    this.dataSource.sort = this.sort;
  }
}

但我得到了同样的结果。。。

const 表中的数据,而我是从API中检索数据-为什么会有不同?

尝试3

我的代码如下所示。我还是不能分类,现在我看到了

https://material.angular.io/guide/theming

import { Component, OnInit, ViewChild } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Loan } from '../loan';
import { Observable } from 'rxjs';
import {MatTableDataSource, MatSort} from '@angular/material'

@Component({
  selector: 'app-loans',
  templateUrl: './loans.component.html',
  styleUrls: ['./loans.component.css']
})
export class LoansComponent implements OnInit {
  columnsToDisplay = ['id', 'borrowerName', 'fundingAmount', 'repaymentAmount'];

  loans : Loan[];
  dataSource = new MatTableDataSource(this.loans);

  constructor(private http:HttpClient) {

    this.getLoans().subscribe((loans) => {
      this.loans = loans;
      // this.dataSource = new MatTableDataSource(loans);
    });
    this.dataSource = new MatTableDataSource(this.loans);

  }

  getLoans() {
    return <Observable<Loan[]>> this.http.get('http://localhost:1113/api/loans');
  }

  @ViewChild(MatSort) sort: MatSort;

  ngOnInit() {
    // this.dataSource.sort = this.sort;
  }
  ngAfterViewInit() { 
    this.dataSource.sort = this.sort; 
  }
}