Angular Material Table仅在单击表格时显示项目 [英] 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.

我从Rest-API Cloud Blobstorage检索数据，然后填充空数组.

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

下面是代码:

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

这里我导出接口PeriodicElement

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;

}

导出类TableComponent实现OnInit {

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

推荐答案

尝试使用loadingData布尔值.以及为什么在Angular中使用Promises?尝试可观察的.这不是React或普通的JS，不是带有TypeScript的Angular，我们使用RxJ进行数据流传输.

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

在您的html中，在表格容器标签上使用* ngIf指令:

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

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

您的服务方法变为:

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

由于 getContent()是异步代码，因此在加载数据后需要重新呈现html.使用 loadingData 属性，您将告诉角度何时必须重新呈现页面.

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.

这篇关于Angular Material Table仅在单击表格时显示项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！