Angular Material Table only display items when click on table

Question

Items only display on table, when I click on the table.

When first time loading the page, the table is empty. I don't know why.

I retrieve the data from Rest-API Cloud Blobstorage and then I fill the empty Array.

here is the code:

import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

Here I export interface PeriodicElement

//name of table column
export interface PeriodicElement {
  timestamp: string;  //need to be declared as string, angular table module requires it
  key: string;
  value: number;

}

export class TableComponent implements OnInit {

displayedColumns: string[] = ['timestamp', 'key', 'value'];

ELEMENT_DATA: PeriodicElement[] = new Array<PeriodicElement>();

dataSource = new MatTableDataSource<PeriodicElement>(this.ELEMENT_DATA);
data_array: Array<JsonSchema> = [];

@ViewChild(MatSort, { static: true }) sort: MatSort;  //sort data 
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;  //for displaying data in the tables

constructor( privat DataStreamService: DataStreamService) {}

ngOnInit(): void {
this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;

this.DataStreamService.getContents().then(results => {
this.data = results
......
....

....cut code .... 

this.ELEMENT_DATA.push(...tabledata)


}

On Browser View, when Table is rendered. when I click on items per page data loads, before that it shows an empty table.

maybe you guys know how to fix it. I spend days and didn't find the problems. Many thanks in advance

AlleXyS · Accepted Answer · 2020-09-03 08:47:36Z

try to use a loadingData boolean. And why you use Promises in Angular? Try Observables. This is not React, or plain JS, is Angular with TypeScript and we use RxJs for data streaming.

export class YourComponent extends OnInit {

    loadingData = false;

     constructor(
         // try to make a difference here between
         // an instance started with "lowercase" and the service name
         private dataStreamService: DataStreamService
     ) {}
    
    ngOnInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
    
        this.loadingData = true;
        this.dataStreamService.getContents().subscribe(results => {
           this.data = results;
           this.loadingData = false;
        });
    }
}

in your html use *ngIf directive on table container tab:

<div *ngIf="!loadingData">
  <table>
   ... your content
  </table>
</div>

and your service method became :

getContent(): Observable<any> {
   return this.http.get<any_type>(url).pipe()
     .tap(response => {
        // here you can modelate your data
        return response;
     });
}

because getContent() is an asyncronous code, you need to rerender your html after data is loaded. Using loadingData attribute, you will tell the angular when must to rerender the page.

Santosh Shinde · Accepted Answer · 2020-09-03 08:34:24Z

0

Try like this

ngOnInit(): void {
this.DataStreamService.getContents().then(results => {
  this.data = results; 
  this.dataSource = new MatTableDataSource(this.data);
  this.dataSource.paginator = this.paginator;
  this.dataSource.sort = this.sort;
});

answered Sep 3, 2020 at 8:34

Santosh Shinde

1,21210 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Material Table only display items when click on table

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related