mat-table won't get filled with data from restservice - html

Question

I am getting an array from my restservice. This is working and some information of the response I am printing on the page. But strangely I cannot fill my mat-table and I don't know why.The mat-table was working before, I am just not putting the data in it the right way. Every help will be appreciated.
table-paginator-component.ts:
import {Component, OnInit, ViewChild} from '#angular/core';
import {MatPaginator} from '#angular/material/paginator';
import {MatTableDataSource} from '#angular/material/table';
import {HttpService} from '../http.service';
import { HttpClient } from '#angular/common/http';
import {AreaCode} from '../models/areacode';
#Component({
// tslint:disable-next-line: component-selector
selector: 'table-paginator',
styleUrls: ['table-paginator.component.css'],
templateUrl: 'table-paginator.component.html',
})
export class TablePaginatorComponent implements OnInit {
displayedColumns: string[] = ['standort', 'stammnummer', 'bereich'];
products = [];
dataSource = new MatTableDataSource<any>(this.products);
constructor(private httpClient: HttpClient) {
this.getAreaCodes();
}
#ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
ngOnInit() {
this.dataSource.paginator = this.paginator;
}
getAreaCodes() {
this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
.subscribe((res:
any[]) => {
console.log(res);
this.products = res;
});
}
}
table-paginator.component.html:
<!-- <button (click)="getAreaCodes2()">GET /productss</button> -->
<ul>
<li *ngFor="let product of products" >
-- id: {{product.id}}
-- name: {{product.title}}
-- base: {{product.base}}
</li>
</ul>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource">
<!-- Position Column -->
<ng-container matColumnDef="standort">
<th mat-header-cell *matHeaderCellDef> Standort </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="stammnummer">
<th mat-header-cell *matHeaderCellDef> Stammnummer </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="bereich">
<th mat-header-cell *matHeaderCellDef> Bereich </th>
<td mat-cell *matCellDef="let element"> {{element.title}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</div>
Current Output:

Answer 1

try with this.products = res;
this.datasource.data = res;

Answer 2

Change your getAreaCodes method like below,
getAreaCodes() {
this.httpClient.get('http://localhost:8080/phonenumbersmanagement/api/v1/areacodes/all')
.subscribe((res: any[]) => {
this.products = res;
this.dataSource = new MatTableDataSource(res);
});
}
Update your mat-paginator with length as like property binding.
<mat-paginator [length]="products.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

Answer 3

I think that, when you receive data from api and add result value to products variable then datasource variable dont update.
Try to use products variable on html table tag-> [dataSource]="products"

Answer 4

This thing worked for me. import table from angular/material and create an
instance of it using viewchild. get your user data and set displayedColumns in ngOnInit(), In ngAfterContentChecked() you need to create MatTableDataSource instance and set this instance to table.dataSource in ngAfterViewInit() check below
import { MatTable, MatTableDataSource } from '#angular/material/table';
export class GetUserComponent implements OnInit {
#ViewChild(MatTable, {static:false}) table: MatTable<any>;
dataSource :any;
constructor(private appService:AppService){}
ngOnInit() {
this.appService.getUsers().subscribe(data => {
this.userData= data;
});
this.displayedColumns = ['select','title','content'];
}
ngAfterViewInit() {
this.table.dataSource = this.dataSource;
}
ngAfterContentChecked(){
this.dataSource = new MatTableDataSource (this.userData);
}
}
you can check my stackblitz here
https://stackblitz.com/edit/angular-dynamicexamples