У меня возникли проблемы с импортом matSort в мой matTable.
Я предоставляю вам свой код:
dashboard.component.ts
import {Component, ViewChild} from '@angular/core';
import {UserService} from "../user.service";
import {DohvatMantisaService} from "../dohvat-mantisa.service";
import {Mantisi} from "../Mantisi";
import {Observable} from "rxjs/Observable";
import {DataSource} from "@angular/cdk/collections";
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/observable/merge';
import {MatSort} from '@angular/material';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent{
displayedColumns = ['projekt', 'manits', 'kategorija','ozbiljnost','datum_prijave','postavio','odjel','postavio','naziv','status','planirana_isporuka'];
constructor(private user:UserService, private dohvatMantisa:DohvatMantisaService) {
}
dataSource: TableDataSource | null;
mantisi: Mantisi[];
name = this.user.getUsername();
@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource = new TableDataSource(this.dohvatMantisa,this.sort);
}
}
export class TableDataSource extends DataSource<Mantisi>{
constructor(private mantisiDS: DohvatMantisaService,private sort: MatSort){
super();
}
connect(): Observable<Mantisi[]> {
const displayDataChanges = [
this.mantisiDS.dohvatiMantise(),
this.sort.sortChange,
];
return Observable.merge(...displayDataChanges).map(() => {
return this.getSortedData();
});
}
disconnect() {}
getSortedData(): Mantisi[]{
const data = this.mantisiDS.prikazMantisa().slice();
if (!this.sort.active || this.sort.direction == '') { return data; }
return data.sort((a, b) => {
let propertyA: number|string = '';
let propertyB: number|string = '';
switch (this.sort.active) {
case 'projekt': [propertyA, propertyB] = [a.projekt, b.projekt]; break;
case 'manits': [propertyA, propertyB] = [a.manits, b.manits]; break;
case 'kategorija': [propertyA, propertyB] = [a.kategorija, b.kategorija]; break;
case 'ozbiljnost': [propertyA, propertyB] = [a.ozbiljnost, b.ozbiljnost]; break;
case 'datum_prijave': [propertyA, propertyB] = [a.datum_prijave, b.datum_prijave]; break;
case 'postavio': [propertyA, propertyB] = [a.postavio, b.postavio]; break;
case 'naziv': [propertyA, propertyB] = [a.naziv, b.naziv]; break;
case 'status': [propertyA, propertyB] = [a.status, b.status]; break;
case 'planirana_isporuka': [propertyA, propertyB] = [a.planirana_isporuka, b.planirana_isporuka]; break;
}
let valueA = isNaN(+propertyA) ? propertyA : +propertyA;
let valueB = isNaN(+propertyB) ? propertyB : +propertyB;
return (valueA < valueB ? -1 : 1) * (this.sort.direction == 'asc' ? 1 : -1);
});
}
}
Это мой сервис: dohvatMantisaService
import { Injectable } from '@angular/core';
import {Http, Response, RequestOptions, Headers} from "@angular/http";
import {Observable} from "rxjs/Observable";
import {Mantisi} from "./Mantisi";
import 'rxjs';
import 'rxjs/operator/map';
import 'rxjs/operator/do';
@Injectable()
export class DohvatMantisaService {
constructor(public http:Http) { }
result: Mantisi[];
dohvatiMantise(): Observable<Mantisi[]>{
return this.http.get('/mantis/getMantisReport').map(this.extractData);
}
private extractData(response: Response) {
let body = response.json();
return body || {};
}
prikazMantisa(): Mantisi[]{
this.dohvatiMantise().subscribe(res => this.result = res);
return this.result;
}
}
И im, предоставляющий вам строку dashboard.component.html matSort:
<mat-table #table [dataSource]="dataSource" class="example-table" matSort>
Основная проблема заключается в том, что данные загружаются и получаются из HTTP-запроса, но я получаю ошибки в консоли, например:
Невозможно прочитать свойство sortChange из undefined в TableDataSource.webpackJsonp.../../../../../src/app/dashboard/dashboard.component.ts.TableDataSource.connect(dashboard.component.ts: 36) в MatTable.webpackJsonp.../../../cdk/esm5/table.es5.js.CdkTable._observeRenderChanges (table.es5.js: 602) в MatTable.webpackJsonp.../../../cdk/esm5/table.es5.js.CdkTable.ngAfterContentChecked(table.es5.js: 522)
Он сообщает мне, что this.sort.sortChange undefined. Я искал все бит Интернета и не мог найти правильный ответ. Надеюсь, ты сможешь помочь мне в этом.