Javascript 单击“表”时，“角度材质表”仅显示项目

当我单击表格时，项目仅显示在表格上

第一次加载页面时，表为空。我不知道为什么

我从RESTAPI云Blobstorage检索数据，然后填充空数组

代码如下：

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

这里我导出接口PeriodiceElement

//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{

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)


}

displayedColumns:string[]=['timestamp'，'key'，'value']；
元素_数据：periodiceElement[]=新数组（）；
dataSource=新MatTableDataSource（this.ELEMENT_DATA）；
数据_数组：数组=[]；
@ViewChild（MatSort，{static:true}）sort:MatSort；//排序数据
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；//用于在表中显示数据
构造函数（privat DataStreamService:DataStreamService）{}
ngOnInit（）：void{
this.dataSource.paginator=this.paginator；
this.dataSource.sort=this.sort；
这个.DataStreamService.getContents（）.then（结果=>{
此参数=结果
......
....
…剪切代码。。。。
this.ELEMENT_DATA.push（…tabledata）
}

在浏览器视图中，渲染表格时。 当我点击每页数据加载项时，在此之前它会显示一个空表

也许你们知道怎么修。 我花了好几天的时间，没有发现问题。非常感谢您提前试一试

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

---

尝试使用loadingData布尔值。为什么要在Angular中使用Promissions？尝试。这不是React，或者简单的JS，是Angular和TypeScript，我们使用RxJs进行数据流

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表格容器选项卡上的use*ngIf指令中：

<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（）：可观察{
返回此.http.get（url.pipe（））
.tap（响应=>{
//在这里，您可以对数据进行建模
返回响应；
});
}

由于

getContent（）

是一个异步代码，因此在加载数据后需要重新渲染html。使用

loadingData

属性，您将告诉用户何时必须重新渲染页面