I'm having trouble figuring out how to implement the Mat-Sort functionality from Angular Material. When I try to declare my variable dataSource, I get the following error:
Argument of type 'Observable' is not assignable to parameter of type 'any[]'. Property length is missing in type 'Observable'.
Any suggestions on what I can do to fix this? Below you'll find the code for my component.ts and the related service.ts
component.ts
import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { Location } from '@angular/common';
import { DataSource } from '@angular/cdk/collections';
import { Observable } from 'rxjs/Observable';
import { MatTableDataSource, MatSort } from '@angular/material';
import { Report } from './../../models/report';
import { RepGenService } from './../../services/rep-gen.service';
@Component({
selector: 'app-rep-gen-report',
templateUrl: './rep-gen-report.component.html',
styleUrls: ['./rep-gen-report.component.css'],
encapsulation: ViewEncapsulation.None
})
export class RepGenReportComponent implements OnInit {
reports: Report[];
dataSource = new MyDataSource(this.repGenService);
displayedColumns = ['report_id', 'caption'];
constructor(private repGenService: RepGenService, private location: Location) { }
ngOnInit() {
this.getRepGen_Report();
}
getRepGen_Report(): void {
this.repGenService.getReport()
.subscribe(reports => this.reports = reports);
}
save(reports: Report[]) {
this.repGenService.setReport(this.reports);
}
goBack(): void {
this.location.back();
}
}
export class MyDataSource extends DataSource<any> {
constructor(private repGenService: RepGenService) {
super();
}
connect(): Observable<Report[]> {
return this.repGenService.getReport();
}
disconnect() { }
}
service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/map';
const httpOptions = {
headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};
@Injectable()
export class RepGenService {
constructor(public http: HttpClient) { }
getReport(): Observable<any> {
return this.http.get('/api/repGen_Report')
.map(response => response);
}
setReport(reports) {
this.http.post('/api/repGen_Report/update', reports
).subscribe();
}
}
Thank you!
EDIT: Updated the component.ts file