Как включить сортировку с использованием углового материала

Question

У меня есть таблица, которую я хотел отсортировать, и нашел страницу Сортировать заголовок на сайте Angular Material. Я следовал коду из этого примера, но он не работает в моем приложении - заголовки столбцов не кликабельны, поэтому нет возможности сортировки. Я, вероятно, упускаю что-то простое, поскольку я все еще изучаю Angular. Я использую Angular 4.2.5 (пакеты по умолчанию от установки Visual Studio). Не потрудился обновить с тех пор, как они работают, но пакет материалов - 6.4.7. Не уверен, что различия в версии могут быть фактором, но он был успешно установлен и указан в коде.

Я также нашел эту статью StackOverflow , где автор, похоже, следует тому же примеру.

HTML

<h1>Claim Logs</h1>

<div>
    <table>
        <tr>
            <td>Case: <input type="text" class="textEntry" [(ngModel)]="caseId" size="20" /></td>
            <td>Part Request: <input type="text" class="textEntry" [(ngModel)]="requestNumber" size="20" /></td>
            <td>Repair Tag: <input type="text" class="textEntry" [(ngModel)]="tagNumber" size="20" /></td>
        </tr>
        <tr>
            <td>After: <input type="text" class="textEntry" [(ngModel)]="startDate" size="20" /></td>
            <td>Before: <input type="text" class="textEntry" [(ngModel)]="endDate" size="20" /></td>
            <td><button (click)="get()">Refresh</button><button (click)="clear()">Clear</button></td>
        </tr>
    </table>
</div>
<p *ngIf="!logs"><em>Loading...</em></p>
<table *ngIf="logs" matSort (matSortChange)="sortData($event)">
    <thead>
        <tr>
            <th mat-sort-header="date">Logged</th>
            <th mat-sort-header="case">Case</th>
            <th mat-sort-header="tag">Repair Tag</th>
            <th mat-sort-header="request">Part Request</th>
            <th>Message</th>
            <th mat-sort-header="source">Source</th>
            <th mat-sort-header="status">Status</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let log of logs">
            <td>{{ log.dateLogged | date : 'short' }}</td>
            <td>{{ log.caseId }}</td>
            <td>{{ log.repairTag }}</td>
            <td>{{ log.partRequest }}</td>
            <td>{{ log.message }}</td>
            <td>{{ log.source }}</td>
            <td>{{ log.status }}</td>
        </tr>
    </tbody>
</table>

TS

import { Component, Inject, OnInit } from '@angular/core';
import { Http, RequestOptionsArgs, URLSearchParams } from '@angular/http';
import { Sort } from '@angular/material';

@Component({
    selector: 'logs',
    templateUrl: './logs.component.html'
})
export class LogsComponent implements OnInit {
    private baseUrl: string;
    private http: Http;

    logs: LogEntry[] = new Object as LogEntry[];

    startDate: string = '';
    endDate: string = '';
    caseId: string = '';    // 1120170001
    tagNumber: string = '';
    requestNumber: string = '';

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
        this.baseUrl = baseUrl;
        this.http = http;
    }

    ngOnInit() {
        this.get();
    }

    sortData(sort: Sort) {
        const data = this.logs.slice();
        if (!sort.active || sort.direction === '') {
            this.logs = data;
            return;
        }

        this.logs = data.sort((a, b) => {
            const isAsc = sort.direction === 'asc';
            switch (sort.active) {
                case 'date': return compare(a.dateLogged, b.dateLogged, isAsc);
                case 'case': return compare(a.caseId, b.caseId, isAsc);
                case 'tag': return compare(a.tagNumber, b.tagNumber, isAsc);
                case 'request': return compare(a.requestNumber, b.requestNumber, isAsc);
                case 'source': return compare(a.source, b.source, isAsc);
                case 'status': return compare(a.status, b.status, isAsc);
                default: return 0;
            }
        });
    }

    get() {
        var url = this.baseUrl + 'api/logs';

        var params = new URLSearchParams;
        params.append('startDate', this.startDate);
        params.append('endDate', this.endDate);
        params.append('caseId', this.caseId);
        params.append('tagNumber', this.tagNumber);
        params.append('requestNumber', this.requestNumber);
        var options = new Object as RequestOptionsArgs;
        options.params = params;

        this.http.get(url, options).subscribe(result => {
            var response = result.json() as LogsResponse;
            if (response.status == 'OK') {
                this.logs = response.logs;
            } else {
                alert(response.status);
            }
        }, error => console.error(error));
    }

    clear() {
        this.startDate = '';
        this.endDate = '';
        this.caseId = '';
        this.tagNumber = '';
        this.requestNumber = '';
    }
}

function compare(a: any, b: any, isAsc: boolean) {
    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
};