I'm facing an issue displaying my backend data in the mat-table schematic that I created. I was able to pull the data using my service and pass it in the connect() to load the data with fields from my DB, my main issue is that the table is showing at the bottom the number of rows being pulled but the data is not showing in the table it self, when I change the number of items per page it will show the data in rows.
I will paste my code and a screen shot of what I'm getting.
branch-table.component.html
<div class="mat-elevation-z8 full-width-table">
<mat-table matSort aria-label="Elements">
<!-- Id Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.id}}</mat-cell>
</ng-container>
<!-- Branch Code Column -->
<ng-container matColumnDef="branchCode">
<mat-header-cell *matHeaderCellDef mat-sort-header>Branch Code</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.branchCode}}</mat-cell>
</ng-container>
<!-- Host Column -->
<ng-container matColumnDef="host">
<mat-header-cell *matHeaderCellDef mat-sort-header>Host</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.host}}</mat-cell>
</ng-container>
<!-- ftpPort Column -->
<ng-container matColumnDef="ftpPort">
<mat-header-cell *matHeaderCellDef mat-sort-header>FTP Port</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.ftpPort}}</mat-cell>
</ng-container>
<!-- Username Column -->
<ng-container matColumnDef="username">
<mat-header-cell *matHeaderCellDef mat-sort-header>Username</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.username}}</mat-cell>
</ng-container>
<!-- Password Column -->
<ng-container matColumnDef="password">
<mat-header-cell *matHeaderCellDef mat-sort-header>Password</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.password}}</mat-cell>
</ng-container>
<!-- Folder Path In Column -->
<ng-container matColumnDef="folderPathIn">
<mat-header-cell *matHeaderCellDef mat-sort-header>Folder Path In</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.folderPathIn}}</mat-cell>
</ng-container>
<!-- Folder Path Out Column -->
<ng-container matColumnDef="folderPathOut">
<mat-header-cell *matHeaderCellDef mat-sort-header>Folder Path Out</mat-header-cell>
<mat-cell *matCellDef="let row">{{row.folderPathOut}}</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 #paginator
[length]="dataSource?.data.length"
[pageIndex]="0"
[pageSize]="2"
[pageSizeOptions]="[2, 50, 100, 250]">
</mat-paginator>
</div>
branch-table-datasource.ts
import { DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { map } from 'rxjs/operators';
import { Observable, of as observableOf, merge } from 'rxjs';
import { Branch } from '../shared/branch.model';
import { DataStorageService } from '../shared/data-storage.service';
// TODO: Replace this with your own data model type
/**
* Data source for the BranchTable view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class BranchTableDataSource extends DataSource<Branch> {
//data: BranchTableItem[] = EXAMPLE_DATA;
data : Branch[] = []; //= EXAMPLE_DATA;
paginator: MatPaginator;
sort: MatSort;
constructor(private dataService: DataStorageService) {
super();
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
connect(): Observable<Branch[]> {
// Combine everything that affects the rendered data into one update
// stream for the data-table to consume.
this.dataService.getBranches().subscribe(branches => {
//console.log(branches);
this.data = [...branches];
//this.data = branches;
console.log(this.data);
this.paginator.length = this.data.length;
});
const dataMutations = [
observableOf(this.data),
this.paginator.page,
this.sort.sortChange
];
// return merge(...dataMutations)
// .pipe(
// map(() => this.getPagedData(this.getSortedData([...this.data])))
// );
return merge(...dataMutations).pipe(map(() => {
return this.getPagedData(this.getSortedData([...this.data]));
}));
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
disconnect() {}
/**
* Paginate the data (client-side). If you're using server-side pagination,
* this would be replaced by requesting the appropriate data from the server.
*/
private getPagedData(data: Branch[]) {
const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
return data.splice(startIndex, this.paginator.pageSize);
}
/**
* Sort the data (client-side). If you're using server-side sorting,
* this would be replaced by requesting the appropriate data from the server.
*/
private getSortedData(data: Branch[]) {
if (!this.sort.active || this.sort.direction === '') {
return data;
}
return data.sort((a, b) => {
const isAsc = this.sort.direction === 'asc';
switch (this.sort.active) {
case 'id': return compare(+a.id, +b.id, isAsc);
case 'branchCode': return compare(a.branchCode, b.branchCode, isAsc);
case 'host': return compare(+a.host, +b.host, isAsc);
case 'ftpPort': return compare(+a.ftpPort, +b.ftpPort, isAsc);
case 'username': return compare(+a.username, +b.username, isAsc);
case 'password': return compare(+a.password, +b.password, isAsc);
case 'folderPathIn': return compare(+a.folderPathIn, +b.folderPathIn, isAsc);
case 'folderPathOut': return compare(+a.folderPathOut, +b.folderPathOut, isAsc);
default: return 0;
}
});
}
}
/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
function compare(a: string | number, b: string | number, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
branch-table.component.ts
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTable } from '@angular/material/table';
import { Branch } from '../shared/branch.model';[![enter image description here][1]][1]
import { DataStorageService } from '../shared/data-storage.service';
import { BranchTableDataSource } from './branch-table-datasource';
@Component({
selector: 'app-branch-table',
templateUrl: './branch-table.component.html',
styleUrls: ['./branch-table.component.css']
})
export class BranchTableComponent implements AfterViewInit, OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatTable) table: MatTable<Branch>;
dataSource: BranchTableDataSource;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['id','branchCode','host','ftpPort','username','password','folderPathIn','folderPathOut'];
constructor(private dataService: DataStorageService){}
ngOnInit() {
this.dataSource = new BranchTableDataSource(this.dataService);
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
this.table.dataSource = this.dataSource;
}
}
From the screen shot below you can see that it shows 1 - 2 of 7 which is telling that there are 7 rows and the page it showing 2 or suppose to show 2 rows, the second screen shot I changed the page items to show 50 and then it showed the row data
[
