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

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

找不到Angular Material核心主题。大多数材料组件可能无法正常工作。有关更多信息，请参考主题指南：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数据源，并在模板中使用sort使其生效。

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

您需要导入

import {MatTableDataSource, MatSort} from '@angular/material';

然后

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

并在模板中

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

STACKBLITZ DEMO

Answer 2

Sajeetharan帮助我找到了答案。

基本上我是这样做的：

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

物料表默认排序不起作用

2 个答案: