无法使用 MatSort 对 mat-table 进行排序答案

【问题标题】：Unable to sort a mat-table with MatSort无法使用 MatSort 对 mat-table 进行排序
【发布时间】：2019-05-15 18:21:18
【问题描述】：

我正在尝试使用 matSort 在 mat-table 上启用排序。

很遗憾，我无法进行排序。我已尝试按照有关 Angular Material 的文档中的说明进行操作，但我不知道出了什么问题。

这是我的代码：

非常感谢！

order-details.component.html

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

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

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

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

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

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

order-details.component.ts

import { Component, OnInit, Inject, ViewChild } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA, MatTableDataSource, MatSort } from '@angular/material';
import { Order } from 'src/app/models/order.model';
import { MinimalUser } from './../../../models/minimal-user.model';

@Component({
    selector: 'order-details',
    templateUrl: './order-details.component.html',
    styleUrls: ['./order-details.component.scss']
})
export class OrderDetailsComponent implements OnInit {
    displayedColumns = ['customerNumber', 'customerName', 'orderNumber', 'orderAmount'];
    dataSource: MatTableDataSource<Order>;
    @ViewChild(MatSort) sort: MatSort;
    loadingIndicator: boolean;

    constructor(public dialogRef: MatDialogRef<OrderDetailsComponent>,
        @Inject(MAT_DIALOG_DATA) public data: { orders: Order[], user: MinimalUser }) {
         }

    ngOnInit() {
        this.dataSource = new MatTableDataSource(this.data.orders);
        this.dataSource.sort = this.sort;;
    }


}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

请阅读documentation你缺少的<th>和<td>标签

    <ng-container matColumnDef="customerNumber">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>CustomerNumber </th>
        <td mat-cell *matCellDef="let row"> {{row.customerNumber}} </td>
    </ng-container>

【讨论】：

您好，感谢您的意见。但是在这种情况下 th 和 td 是不必要的
你能在这个闪电战中重现你的问题吗stackblitz.com/angular/…
谢谢dota2pro。我能够用你的例子解决这个问题。问题是我将表格包装在一个 div 中，该 div 只有在我的加载指示器显示数据已加载时才会显示。不知何故，这使得排序不起作用！

【解决方案2】：

在 app.module.ts 的导入列表中导入 MatSortModule 到

imports: [
    BrowserModule,
    MatTableModule,
    MatSortModule
  ],

【讨论】：