Angular Material Table 仅在单击表格时显示项目 [英] Angular Material Table only display items when click on table

问题描述

项目只显示在桌子上，当我点击桌子时.

第一次加载页面时，表格是空的.我不知道为什么.

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

代码如下:

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

这里我导出接口PeriodicElement

//表格列名导出接口 PeriodicElement {时间戳:字符串；//需要声明为字符串，角表模块需要它键:字符串；值:数量；}

导出类 TableComponent 实现 OnInit {

displayedColumns: string[] = ['timestamp', 'key', 'value'];ELEMENT_DATA: PeriodicElement[] = new Array();dataSource = new MatTableDataSource(this.ELEMENT_DATA);data_array:数组= [];@ViewChild(MatSort, { static: true }) 排序:MatSort;//排序数据@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;//用于在表格中显示数据构造函数(私有数据流服务:数据流服务){}ngOnInit(): 无效 {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;this.DataStreamService.getContents().then(results => {this.data = 结果..............切代码....this.ELEMENT_DATA.push(...tabledata)}

在浏览器视图中，当表格呈现时.当我点击每页数据加载的项目时，它会显示一个空表.

也许你们知道如何解决它.我花了几天时间并没有发现问题.非常感谢提前

解决方案

尝试使用 loadingData 布尔值.为什么要在 Angular 中使用 Promise?尝试 Observables.这不是 React 或普通 JS，而是带有 TypeScript 的 Angular，我们使用 RxJs 进行数据流传输.

export class YourComponent extends OnInit {加载数据 = 假；构造函数(//尝试在此处有所不同//一个以小写"开头的实例；和服务名称私有数据流服务:DataStreamService) {}ngOnInit() {this.dataSource.paginator = this.paginator;this.dataSource.sort = this.sort;this.loadingData = true;this.dataStreamService.getContents().subscribe(results => {this.data = 结果；this.loadingData = false;});}}

在您的 html 中，在表格容器选项卡上使用 *ngIf 指令:

<表格>...你的内容

你的服务方法变成了:

getContent(): Observable{返回 this.http.get(url).pipe().tap(响应 => {//在这里您可以对数据进行建模返回响应；});}

因为 getContent() 是一个异步代码，你需要在数据加载后重新渲染你的 html.使用 loadingData 属性，您将告诉 angular 何时必须重新渲染页面.

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

解决方案

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.

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