Angular Material Table 僅在單擊表格時顯示項目

Question

當我單擊表格時，項目僅顯示在表格上。

第一次加載頁面時，表格是空的。 我不知道為什么。

我從 Rest-API Cloud Blobstorage 檢索數據，然后填充空數組。

這是代碼：

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

這里我導出接口 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 {

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)


}

在瀏覽器視圖上，當表格呈現時。 當我點擊每頁數據加載的項目時，在此之前它會顯示一個空表。

也許你們知道如何解決它。 我花了幾天時間並沒有發現問題。 提前謝謝了

Answer 1

嘗試使用 loadingData 布爾值。 為什么要在 Angular 中使用 Promise？ 嘗試觀察。 這不是 React 或普通 JS，而是帶有 TypeScript 的 Angular，我們使用 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 中，在表容器選項卡上使用 *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()是一個異步代碼，所以你需要在數據加載后重新渲染你的 html。 使用loadingData屬性，您將告訴 angular 何時必須重新渲染頁面。

Answer 2

像這樣嘗試

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