Angular Material Table only display items when click on table

问题

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

回答1:

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.

回答2:

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;
});

来源：https://stackoverflow.com/questions/63719684/angular-material-table-only-display-items-when-click-on-table

标签

javascript

arrays

angular

angular-material