javascript - Angular Material Table 仅在单击表格时显示项目
问题描述
当我单击表格时,项目仅显示在表格上。
第一次加载页面时,表是空的。我不知道为什么。
我从 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)
}
在浏览器视图上,当表格呈现时。当我单击每页数据加载的项目时,在此之前它显示一个空表。
也许你们知道如何解决它。我花了几天时间并没有发现问题。提前谢谢了
解决方案
尝试使用 loadingData 布尔值。为什么你在 Angular 中使用 Promises?试试Observables。这不是 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
属性,您将告诉角度何时必须重新渲染页面。
推荐阅读
- flutter - “_drawAreaBoundsOutdated == false': is not true”使用 charts_flutter 包更新 TimeSeriesChart 的列表数据时出错
- amazon-web-services - Glue Classifier 无法使用 Grok 模式对列进行分类
- mybatis - MyBatis:无效比较:java.util.Date 和 java.lang.String
- python - 在外部库中使用时禁用 tensorflow 日志
- javascript - [{a: 1}],[{b: 2}] 转换为 {a:1,b:2}
- python - Pandas get cell value by row NUMBER (NOT row index) and column NAME
- sql - Oracle 10g 和 11g 中的 Regexp_like
- c - 传递 'atoi' 的参数 1 从整数中生成指针,而无需在 C 中进行强制转换
- sequelize.js - 是否可以使用 sequelize 中的钩子获取插入行的 ID?
- java - 缺少return语句,但是return语句在那里?