Невозможно отсортировать мат-таблицу с помощью MatSort

Question

Я пытаюсь включить сортировку таблицы mat с помощью matSort.

К сожалению, я не могу заставить работать сортировку.Я пытался следовать инструкциям в документации по угловому материалу, но не могу понять, в чем дело.

Вот мой код:

Заранее большое спасибо!

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;;
    }


}

Answer 1

Импорт MatSortModule в списке импорта в app.module.ts до

imports: [
    BrowserModule,
    MatTableModule,
    MatSortModule
  ],

Answer 2

Пожалуйста, прочитайте документацию вы пропустили <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>