angular - Material 表默认排序不起作用

Question

我有以下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>

loans.component.ts

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

我的代码现在如下所示。我仍然无法排序，现在我看到了

Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: 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; 
  }
}

Answer 1

首先，您需要将贷款转换为 mat 数据源，并在模板中使用排序使其正常工作。

我确信，您没有在 .ts 和模板代码中的任何地方这样做。

您需要导入，

从“@angular/material”导入 {MatTableDataSource, MatSort}；

然后，

dataSource = new MatTableDataSource(ELEMENT_DATA); //here pass loans
@ViewChild(MatSort) sort: MatSort;

在模板中，

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

<强> STACKBLITZ DEMO