I am new to Angular 4 and angular material and i am trying to add the angular material data table with http, pagination, sorting and filtering into my dashboard component, With hard-coded array i was able to achieve filter, sort and pagination. But i am not able to pass a json data from service into the array.
Any help would be appreciated. Thanks in advance..!!!
Please find my code below.
test.json
[{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
}]
component.service
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { HttpModule, Http, Response, Headers, RequestOptions } from
'@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { User } from '../models/fleetData.model';
@Injectable()
export class FleetDataService {
private serviceUrl = '../../assets/data/test.json';
constructor(private http: HttpClient) { }
getFleetData(): Observable<User[]> {
return this.http.get<User[]>(this.serviceUrl);
}
}
component.ts
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements AfterViewInit {
// dataSource = new UserDataSource(this.getFleetData);
displayedColumns = ['First Name', 'Last Name', 'Score'];
dataSource = new MatTableDataSource<User>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults
to lowercase matches
this.dataSource.filter = filterValue;
}
constructor(private getFleetData: FleetDataService, private loaderService:
LoaderService) { }
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}
const ELEMENT_DATA: User[] =
[{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
}]
export class UserDataSource extends DataSource<any> {
constructor(private getFleetData: FleetDataService) {
super();
}
connect(): Observable<User[]> {
return this.getFleetData.getFleetData();
}
disconnect() {}
}
component.html
<h1>Hi Dashboard</h1>
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)"
placeholder="Filter">
</mat-form-field>
</div>
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<!-- First Name Column -->
<ng-container matColumnDef="First Name">
<mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-
header-cell>
<mat-cell *matCellDef="let user"> {{user.FirstName}} </mat-cell>
</ng-container>
<!-- Last Name Column -->
<ng-container matColumnDef="Last Name">
<mat-header-cell *matHeaderCellDef mat-sort-header> Last Name </mat-
header-cell>
<mat-cell *matCellDef="let user"> {{user.LastName}} </mat-cell>
</ng-container>
<!-- Score Column -->
<ng-container matColumnDef="Score">
<mat-header-cell *matHeaderCellDef mat-sort-header> Score </mat-header-
cell>
<mat-cell *matCellDef="let user"> {{user.Score}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;">
</mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
I guess you are confused with two different ways to load data in the table. From the looks of your component.service, specifically 'FleetDataService' class, you are trying to get and Observable response. The correct way could be as below, for component.ts:
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements AfterViewInit {
fleetData = null;
dataSource = new MatTableDataSource(this.fleetData);
displayedColumns = ['First Name', 'Last Name', 'Score'];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults
to lowercase matches
this.dataSource.filter = filterValue;
}
constructor(private getFleetData: FleetDataService, private loaderService:
LoaderService) {
getFleetData.getFleetData().subscribe(
data => {
this.fleetData = data;
this.dataSource.data = this.fleetData;
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}
Similarly in the above example, what you are trying , can be done in another way, as shown below:
import { Component, AfterViewInit, ViewChild } from '@angular/core';
import { FleetDataService } from '../../services/fleet-data.service';
import { LoaderService } from '../../services/loader.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import {DataSource} from '@angular/cdk/collections';
import { User } from '../../models/fleetData.model';
import {MatPaginator, MatTableDataSource, MatSort} from '@angular/material';
import {BehaviorSubject} from 'rxjs/BehaviorSubject';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements AfterViewInit {
displayedColumns = ['First Name', 'Last Name', 'Score'];
dataSource = new MatTableDataSource<User>(ELEMENT_DATA);
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults
to lowercase matches
this.dataSource.filter = filterValue;
}
constructor(private getFleetData: FleetDataService, private loaderService:
LoaderService) { }
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
}
const ELEMENT_DATA: User[] =
[{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": ""Adam",
"LastName": "Johnson",
"Score": "67"
},{
"FirstName": "Jill",
"LastName": "Smith",
"Score": "disqualified"
}, {
"FirstName": "Eve",
"LastName": "Jackson",
"Score": "94"
}, {
"FirstName": "John",
"LastName": "Doe",
"Score": "80"
}, {
"FirstName": "Adam",
"LastName": "Johnson",
"Score": "67"
}];
Also I see lot of problems in your code. I hope you did not miss anything for MatPaginator and MatSort.
来源：https://stackoverflow.com/questions/47550532/how-to-pass-json-data-received-from-service-to-an-array-in-component-in-angular